For small viewports, we may want to show a variation of the desktop image. A very common use case of this is a cropped, smaller version of the desktop image. In this lesson, we are going to discuss showing a cropped version of the desktop image, but only for smaller viewports.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, maximum-scale=1" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/2.0.7/marx.min.css">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <picture>

    <!-- Show a cropped size image -->

    <source

      media="(max-width: 500px)"

      srcset="https://imgur.com/SXwenFN.jpg"

      sizes="90vw"

    >

    <img

      src="https://imgur.com/stCVVhQ.jpg"

      alt="Mother sheep and her lambs chilling in a field"

    >

  </picture>

</body>

</html>

[HTML5] Show Different Variations of Images Depending on the Viewport Width using Art Direction的更多相关文章

  1. [HTML5] Show Images of Differing Resolutions Depending on the Viewport Width with srcset

    For small viewports, we want to save bandwidth and we may be dealing with slow speeds; so it's very ...

  2. HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>

    网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...

  3. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  4. 闲扯游戏编程之html5篇--山寨版《flappy bird》源码

    新年新气象,最近事情不多,继续闲暇学习记点随笔,欢迎拍砖.之前的〈简单游戏学编程语言python篇〉写的比较幼稚和粗糙,且告一段落.开启新的一篇关于javascript+html5的从零开始的学习.仍 ...

  5. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  6. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  7. HTML5应用之时钟

    利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...

  8. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  9. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

随机推荐

  1. 转载：jquery.ajax之beforeSend方法使用介绍

    常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据.这个就可以用beforeSend方法来实现. 下载demo:a ...

  2. perl学习之FLOCK函数的调用（讲的非常好）

    一段演示flock系统调用的perl程序http://www.extmail.org/forum/viewthread.php?tid=1066

  3. VS做简历的第三天(将文件中的样式保存并且导入)

    VS做简历的第三天(将文件中的样式保存并且导入) 1.先在文件栏新建一个CSS文件 如 2.将第二天如下代码,删除<stype></stype>保留中间部分,复制在CSS文件并 ...

  4. Lecture1 实验过程模型

    Part 1 基本概念 因变量:待检验理论重点关注的,受多个变量影响的变量.(实际考察的,结果) 自变量:影响因变量变化的变量. 因子:重点关注的自变量. 控制变量(control variables ...

  5. lucene segment的产生，flush， commit与es的refresh，flush

    1 segment的产生 当索引一个文档时,如果存在空闲的segment(未被其他线程锁定),则取出空闲segment list中的最后一个segment(LIFO),并锁定,将文档索引至该segme ...

  6. Thymeleaf模板引擎+Spring整合使用方式的介绍

    尊重原创,原文地址为:https://www.cnblogs.com/jiangchao226/p/5937458.html 前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是Sp ...

  7. [转]构建Python+Selenium2自动化测试环境（一）

    很久没有了解自动化了,最近发现项目中沉淀了很多东西,回归测试效 率很低,所以必须要考虑构建自动化来提供各个环节的小效率.由于忙于需求以及产品的流程规范,现在对于测试技术方面的研究也相对少了很多.不过不 ...

  8. python3将unicode转化成中文输出

    a = [] with open('douban.json','r') as f: for i in f.readlines(): a.append((i.encode('utf8').decode( ...

  9. Python之回调函数

    在计算机程序设计中,回调函数,或简称回调(Callback),是指通过函数参数传递到其它代码的,某一块可执行代码的引用.这一设计允许了底层代码调用在高层定义的子程序. 有两种类型的回调函数:即bloc ...

  10. BZOJ 4650 [Noi2016]优秀的拆分 ——后缀数组

    我们只需要统计在某一个点开始的形如$AA$字符串个数,和结束的个数相乘求和. 首先枚举循环节的长度L.即$\mid (A) \mid=L$ 然后肯定会经过s[i]和[i+L]至少两个点. 然后我们可以 ...