HTML 中的图片元素始终使用第一个 srcset 元素

Question

我正在 HTML 页面上实现响应式图像。

这是带有srcset的图片元素

​<picture>
  <source type="image/webp" 
  srcset="images/emily-600px.webp 600w, images/emily-550px.webp 550w, images/emily-460px.webp 460w, images/emily-340px.webp 340w,images/emily-250px.webp 250w" 
  sizes="600px, (min-width: 75rem) 550px, (min-width: 62rem) 460px, (min-width: 48rem) 340px, (min-width: 36rem) 250px">
  <source type="image/jpeg" 
  srcset="images/emily-600px.jpeg 600w, images/emily-550px.jpeg 550w, images/emily-460px.jpeg 460w, images/emily-340px.jpeg 340w,images/emily-250px.jpeg 250w" 
  sizes="600px, (min-width: 75rem) 550px, (min-width: 62rem) 460px, (min-width: 48rem) 340px, (min-width: 36rem) 250px">
  <img src="images/emily.jpg" class="img-fluid" alt="EMILY .....">
</picture>

我正在使用引导程序，即使我调整 Chrome 浏览器窗口的大小，它也总是使用 emily-600px.web 作为图像的来源。例如，如果将浏览器大小调整为 800px，则图像以 336px 宽度呈现，但它继续使用 emily-600px.webp 而不是使用 emily-340px.webp

我错过了什么？

问候， 马特

Answer 1

不使用 src-set，只使用 aspect-ratio 属性和 object-fit 属性。

.image{
     max-width: 100%;
     height: auto;
     object-fit: cover;
     aspect-ratio: 16/9; /*Also you can use 1/1, 1/5 etc...*/
}