Question

我正在尝试对网页使用自适应图像，但是在较小的视口中尝试使用chrome时，Chrome似乎总是在提取全角图像（1280x1920）。我尝试清除缓存并使用隐身模式，但无济于事。

Chrome：版本80.0.3968.0（官方内部版本）开发人员（64位）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<img 
src="https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-768x1152.jpeg" 
srcset="
https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-375x563.jpeg 375w, 
https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-768x1152.jpeg 768w,
https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-1280x1920.jpeg 1280w" 
sizes="(max-width: 375px) 375px, (max-width: 768px) 768px, (max-width: 1280px) 1280px, 1920px" 
alt="" 
title="1">

Answer 1

一种选择是添加width="100%"属性以使图像具有响应性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive Image</title>
  </head>
  <body>
    <img 
      src="https://api.nasa.gov/assets/img/general/apod.jpg" 
      width="100%"
      alt="NASA Astronomy Image" />
  </body>
</html>

如何将HTML图像标签用于响应图像？

1 个答案: