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

问题描述

使用 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 标签。

解决方法

试试这个..

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

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

,

.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"/>

,

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