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. linux中mysql自带同步

    今天打算给一个做主备web服务器.考虑到数据库的同步,现在自己本地虚拟机做个实验. 经过慎重考虑(其实就是参考了下论坛大家的看法). 最后决定用mysql自带的同步设置. 话不多说 配置过程如下.

  2. Django之学员管理一

    Django之学员管理一 建表结构: #班级表class: id title 1 五年一班 2 五年二班 3 五年三班 4 五年四班 #学生表student: id name 班级ID(FK外键) 1 ...

  3. kafka异常问题汇总

    1.报错:: java.util.concurrent.ExecutionException: org.apache.kafka.common.errors.NotLeaderForPartition ...

  4. Python9-day4 作业

    #!/usr/bin/env python# -*- coding:utf-8 -*-# Author:Timli = ["alex", "eric", &qu ...

  5. ZZULIoj 1913: 小火山的计算能力

    Description 别人说小火山的计算能力不行,小火山很生气,于是他想证明自己,现在有一个表达式,他想计算出来. Input 首先是一个t(1<=20)表示测试组数.然后一个表达式,表达式长 ...

  6. addEvenListener('DOMContentLoaded',function(){})

  7. Experiments done

    喷重金属 换重金属溶液 荧光光合 备注 ASD 备注 高光谱 备注 泡EDTA 备注 电镜 备注 2018.12.19(day1) 2018.12.19(day1) 2018.12.18晚(day0) ...

  8. WPF ProgressBar 样式

    <ProgressBar Grid.Row="2" Foreground="#45d207" IsIndeterminate="True&quo ...

  9. PHP 判断表单提交的file是否为空

    echo '<pre>'; var_dump($product_attach_files); echo "</pre>"; echo ];

  10. python3--命名空间字典

    命名空间字典 我们学到了模块的命名空间实际上是以字典的形式实现的,并且可以由内置属性__dict__显示这一点.类和实例对象也是如此:属性点号运算其实内部就是字典的索引运算,而属性继承其实就是搜索连结 ...