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>
  • 相关阅读:
    常用
    饼图
    箱体图
    提取csv文件中需要的部分
    从文件夹中找需要的信息 并生成csv文件
    在磁盘中找到关键字文件 并删除
    正方形棋盘格
    秒表
    【题解】【BZOJ】AGC008F Blackout
    【题解】【BZOJ】BZOJ2281 黑白棋
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9832353.html
Copyright © 2011-2022 走看看