zoukankan      html  css  js  c++  java
  • [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 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- 480px) 90vw,
          (max- 700px) 70vw,
          60vw"
        src="https://imgur.com/aJOEQVz.jpg"
        alt="Opal lying on her new bed - my laptop case"
      >
    
    </body>
    
    </html>
  • 相关阅读:
    java 枚举
    日志监控
    bindActionCreators
    npm 重点小结
    怎么评价Facebook的Relay框架?Meteor.js 是什么?
    解决跨域问题
    React Test相关资料
    深入理解JavaScript系列
    前端mac下的工具
    WebKit的CSS扩展(WebKit是私有属性)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9832353.html
Copyright © 2011-2022 走看看