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.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, maximum-scale=1" />
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/2.0.7/marx.min.css">
  9.   <link rel="stylesheet" href="style.css">
  10. </head>
  11. <body>
  12.  
  13.   <picture>
  14.     <!-- Show a cropped size image -->
  15.     <source
  16.       media="(max-width: 500px)"
  17.       srcset="https://imgur.com/SXwenFN.jpg"
  18.       sizes="90vw"
  19.     >
  20.     <img
  21.       src="https://imgur.com/stCVVhQ.jpg"
  22.       alt="Mother sheep and her lambs chilling in a field"
  23.     >
  24.   </picture>
  25.  
  26. </body>
  27.  
  28. </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. vmalloc_init

    /* linux/mm/vmalloc.c*/ struct vmap_area { unsigned long va_start; unsigned long va_end; unsigned lo ...

  2. MIP启发式算法：爬山算法 (Hill climbing)

    本文主要记录和分享学习到的知识,算不上原创. *参考文献见链接. 本文讲述的是求解MIP问题的启发式算法中的爬山算法 (Hill climbing). 目录 前言 Hill climbing 的过程 ...

  3. Java中TreeMap集合讲解

    1.TreeSet介绍 TreeSet是一个有序集合,可以以任意顺序将元素插入到集合中,在对集合进行遍历的时候,每个元素将自动按照排序后的顺序呈现.底层使用的是二叉树(更具体点是红黑树)实现,对于元素 ...

  4. PAT Basic 1037

    1037 在霍格沃茨找零钱 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一 ...

  5. GitHub中国区前100名到底是什么样的人？(转载)

    本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...

  6. linux下c++sleep函数

    #include <iostream> #include <unistd.h> using namespace std; int main(){ int i; ]; memse ...

  7. spring,mybatis事务管理配置与@Transactional注解使用

    spring,mybatis事务管理配置与@Transactional注解使用[转]   spring,mybatis事务管理配置与@Transactional注解使用 概述事务管理对于企业应用来说是 ...

  8. hdu6060[贪心+dfs] 2017多校3

    /* hdu6060[贪心+dfs] 2017多校3*/ #include <bits/stdc++.h> using namespace std; typedef long long L ...

  9. iOS第三方地图－高德地图（导航sdk路径规划）

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. 好未来谢华亮：AI 在教育行业中的应用

    11 月 23 日,在以「AI 产业技术的渗透与融合」为主题的 NIUDAY 北京站中,好未来 SEG 智慧教育事业部技术总监谢华亮为大家带来了关于「AI 在教育行业中的应用」的分享. 本文是对分享内 ...