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. C语言之链接库

    链接库是windows的术语,但对于Linux来说,其概念是一样的.我们通常会把一些相似或相近功能的程序生成链接库,这样的好处是: 1)便于共享,开发软件时如需要相同功能时,不需要将大量重复的代码整合 ...

  2. linux文件权限更改命令chmod及数字权限

    chmod -change file mode bits :更改文件权限 chmod是用来改变文件或者目录权限的命令,但只有文件的属主和超级用户(root)才有这种权限. 更改文件权限的2种方式: 一 ...

  3. IPy模块--IP地址处理

    Python之实用的IP地址处理模块IPy 实用的IP地址处理模块IPy 在IP地址规划中,涉及到计算大量的IP地址,包括网段.网络掩码.广播地址.子网数.IP类型等 别担心,Ipy模块拯救你.Ipy ...

  4. Python 日期与时间

    Python 3.6.4 import time, calendar, datetime print("距离1970年的秒数为:", time.time()) print(&quo ...

  5. acm之简单博弈 Nim Bash Wythoff

    前些日子我打算开了博弈基础,事后想进行总结下 一句话就是分析必胜或必败,异或为0. 以下内容来自转载: Nim游戏的概述: 还记得这个游戏吗?给出n列珍珠,两人轮流取珍珠,每次在某一列中取至少1颗珍珠 ...

  6. Cookie窃取实验

    文章:IE/FIREFOX/CHROME等浏览器保存COOKIE的位置 Chrome的Cookie数据位于:%LOCALAPPDATA%\Google\Chrome\User Data\Default ...

  7. jquery滚动条插件slimScroll

    参数 width: 'auto', //可滚动区域宽度         height: '100%', //可滚动区域高度         size: '10px', //组件宽度         c ...

  8. [kubernetes] 使用 Minikube 快速搭建本地 k8s 环境 （基于 Docker 驱动模式）

    一.实验环境 操作系统:Centos 7 x86_64 Docker:1.12.6 二.部署 k8s 步骤 2.1  安装 kubectl cat <<EOF > /etc/yum. ...

  9. BZOJ 4753 [Jsoi2016]最佳团体 ——01分数规划 树形DP

    要求比值最大,当然用分数规划. 二分答案,转化为选取一个最大的联通块使得它们的和大于0 然后我们直接DP. 复杂度$O(n^2\log {n})$ #include <map> #incl ...

  10. [BZOJ1584] [Usaco2009 Mar]Cleaning Up 打扫卫生（DP）

    传送门 不会啊,看了好久的题解才看懂 TT 因为可以直接分成n段,所以就得到一个答案n,求解最小的答案,肯定是 <= n 的, 所以每一段中的不同数的个数都必须 <= sqrt(n),不然 ...