时间戳

首页 > 解决方案 > 有没有办法让浏览器在从 srcset 中选择图像时考虑实际元素宽度？

javascript - 有没有办法让浏览器在从 srcset 中选择图像时考虑实际元素宽度？

问题描述

我必须在元素中设置图像的最佳尺寸，即动态尺寸。这是一个示例代码：

<div style="max-width:500px">
    <img 
        style="width:100%;" 
        src="default-path.jpg" 
        srcset="image-200px.jpg 200w, image-250px.jpg 250w, image-300px.jpg 300w, image-400px.jpg 400w, image-500px.jpg 500w"  
    />
</div>

这里的问题是父元素的宽度是由浏览器根据其父元素中的可用宽度动态计算的。它可以是从 0 到 500px 的任何值。srcset 属性通过获取浏览器的视口宽度并根据视口宽度选择最佳图像来工作。我想在这里实现的是浏览器将根据当前元素的宽度获取最佳图像。例如，如果元素是 380px 宽，它应该将 image-400px.jpg 作为元素的源。

据我研究这个问题，似乎没有办法用纯 HTML 或 CSS 来实现这一点。我看到的唯一可能的解决方案是让 JavaScript 在渲染后更改元素的 srcset，但是我想避免为此任务添加额外的 JavaScript 逻辑。似乎 srcset 属性旨在使用视口或屏幕宽度，因此它可以在开始渲染元素之前下载正确的图像。

有谁知道如何实现这一目标？

标签： javascripthtmlcss

解决方案

我认为您正在寻找的是 css 的 @media 规则。（https://www.w3schools.com/cssref/css3_pr_mediaquery.asp）

基本上，如果您传入@media 条件，则可以在 css 中指定要更改的任何参数。下面的示例仅在屏幕宽度 >= 600 像素时应用这些值。

@media only screen and (min-width: 600px) {
#Your values here
}

您可以添加带有源集的图片。为了向您展示我添加了一个内联解决方案。

<picture>
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <source srcset="medium.jpg" media="(min-width: 600px)">
  <img srcset="small.jpg" alt="…&quot;>
</picture>

我还发现这篇文章可能对您有帮助：https ://css-tricks.com/responsive-images-css/ 有不同的技术可以创建响应式图像。

推荐阅读