在下面的代码中，我尝试使图片(红色方 block )的宽度等于我的(最新的)浏览器视口(viewport)的宽度。然而，该图片的大小与后者相差甚远(如 this picture 所示)。图片高1560px，宽1560px。
我已经尝试了所有可以在网上找到的潜在解决方案，包括使用带有 sizes 属性的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>foo</title>
</head>
<body>
<img src="bar.jpg" width="100vw" alt="bar">
</body>
</html>
如何解决此尺寸问题，同时保持相对于视口(viewport)的宽度(因此不使用 width: 100%; 等修复方法)？
最佳答案
<img> width attribute始终无单位，指的是像素。
width: The intrinsic width of the image in pixels.
使用 vw 应用宽度单位，您必须使用 CSS。
<style>
.full-width {
width: 100vw;
}
</style>
<img src="bar.jpg" class='full-width' alt="bar">
关于HTML 视口(viewport)大小问题(100vw ≠ 宽度的 100%)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57153635/