如何在保持图像响应的同时指定图像的宽度和高度？

Question

将 srcset 用于响应式图像时，代码如下所示：

<img 
src="dog.jpg" alt="a dog" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

所以，现在当我运行该页面的灯塔时，它说图像没有指定宽度和高度，这会导致 CLS。

好的，明白了，所以现在我必须指定宽度和高度... 现在代码看起来像这样：

<img 
src="dog.jpg" alt="a dog"
width="800px" height="440px" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

但是现在，在指定了这张图片的宽度和高度之后，srcset 不起作用（指定的宽度和高度覆盖了我的 srcset 规则）。

所以我的问题是如何使用 srcset 为该图像指定宽度和高度并同时保持响应？

感谢您的帮助。

供您参考，我想实现这样的目标： 转到此页面：https://web.dev/debug-web-vitals-in-the-field/ 然后检查此页面上的图像。看看他们是怎么指定宽高的，同时用srcset和img标签的。

Answer 1

试试这个..

.responsive {
  width: 100%;
  height: auto;
}

<img src="dog.jpg" alt="a dog" class="responsive">

Answer 2

.img{
  height:75%;
  width:auto;
  resize:both;
  min-height:200px;
  max-height:750px;
  min-width:auto;
  max-width:auto;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/275px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg" class="img" alt="mountain"/>

Answer 3

<img 
src="dog.jpg" alt="a dog"
width="800px" height="100%" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

Answer 4

我刚得到这个问题的答案。我通过更多的观察和研究来修复它。我想与其他人分享，以帮助他们遇到这种情况。具有宽度和高度属性的响应式图像的最终代码如下所示：

<img 
src="dog.jpg" alt="a dog"
width="800" height="440" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

我刚刚从维度（宽度和高度属性）中删除了“px”，就是这样，它现在工作正常。

如何在保持图像响应的同时指定图像的宽度和高度？

How to specify the width and height of an image while keeping it responsive at the same time?

html

css

image

srcset

responsive-images