For small viewports, we want to save bandwidth and we may be dealing with slow speeds; so it's very important that images' filesizes are not too big. In this lesson, we are going to cover how to show a different-sized image than the one seen on desktop.

<!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>
<!-- 700w: 700px; 90vw: 90% vieport width -->
  <img

    srcset="https://imgur.com/Nv96rWN.jpg 700w,

      https://imgur.com/aJOEQVz.jpg 1024w"

    sizes="(max-width: 480px) 90vw,

      (max-width: 700px) 70vw,

      60vw"

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

    alt="Opal lying on her new bed - my laptop case"

  >

</body>

</html>

[HTML5] Show Images of Differing Resolutions Depending on the Viewport Width with srcset的更多相关文章

  1. [HTML5] Show Different Variations of Images Depending on the Viewport Width using Art Direction

    For small viewports, we may want to show a variation of the desktop image. A very common use case of ...

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

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

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

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

  4. HTML5 之Canvas绘制太阳系

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

  5. HTML5应用之时钟

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

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

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

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

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

  8. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  9. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

随机推荐

  1. The Three Day

    函数基础-练习 #.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改操作 # def modify_file(filename,old,new): # import os # w ...

  2. element使用心得

    Table Table 常用属性解释 数据过滤,filter过滤器 <el-table-column width="200" show-overflow-tooltip la ...

  3. LeetCode（79） Word Search

    题目 Given a 2D board and a word, find if the word exists in the grid. The word can be constructed fro ...

  4. 算法竞赛中c++一些需要注意的错误

    1. 关于精度: 取整 除法取整: (除数为正)被除数为正时系统除法为向下取整,被除数为负时系统除法为向上取整. 向上取整(被除数非负,除数为正): 一般写法(有bug): int cal(int x ...

  5. 集群高可用之lvs

    集群: 随着互联网的发展,大量的客户端的请求,服务器的负载越来越大,单台服务器的负载有限,会导致服务器响应客户端请求的时间越长,甚至产生拒绝服务的情况.目前网站是24小时不间断提供网络服务,仅采用单点 ...

  6. Oracle spool 用法小结

    关于SPOOL(SPOOL是SQLPLUS的命令,不是SQL语法里面的东西.) 对于SPOOL数据的SQL,最好要自己定义格式,以方便程序直接导入,SQL语句如: select taskindex|| ...

  7. Codeforces Round Rockethon 2015

    A. Game 题目大意:A有N1个球,B有N2个球,A每次可以扔1-K1个球,B每次可以扔1-K2个球,谁先不能操作谁熟 思路:．．．．．显然每次扔一个球最优．．．． #include<ios ...

  8. 刷题总结——玉蟾宫（bzoj3039单调栈）

    题目: Description 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地.这片土地被分成N*M个格子,每个格子里写着'R ...

  9. 【双向bfs】2017多校训练十 HDU 6171 Admiral

    [题意] 现在给出一个三角矩阵,如果0编号的在点(x,y)的话,可以和(x+1,y),(x-1,y),(x+1,y+1),(x-1,y-1)这些点进行交换. 我们每一次只能对0点和其他点进行交换.问最 ...

  10. uva 11995 判别数据类型

    Problem I I Can Guess the Data Structure! There is a bag-like data structure, supporting two operati ...