我正在尝试为我的网页使用响应式图像，但在较小的视口(viewport)中尝试时，chrome 似乎总是获取全宽图像 (1280x1920)。我尝试清除缓存并使用隐身模式，但没有任何效果。
Chrome: Version 80.0.3968.0 (Official Build) dev (64-bit)
<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">
最佳答案
一种选择是添加 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 - 如何将 HTML 图像标签用于响应式图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59110689/