响应图像：img srcset引导，错误大小的图像被加载
我正在使用具有响应图像的引导。我想通过向浏览器提供多种图像大小来优化加载时间。根据本文，使用srcset这样的简单方法有助于让浏览器选择最佳图像大小：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
我的问题是，将其与引导img响应类相结合，即使只需要一张小图片，也会加载一张大图片。
代码示例：Bootply。使用Chrome进行测试，它内置支持srcset支持！其他一些浏览器需要picturefill.js才能识别它。）
如果您复制图像的源（或查看Chrome网络选项卡中的开发工具），您可以看到750宽度版本被加载，并调整大小为一个小图像，即使有更小的版本是最佳的使用。（同样的事情发生在IE和火狐，如果picturesill JS加载支持img srcset。）
我做错了什么？
共有1个答案
您需要使用size属性告知浏览器图像在设计中的宽度，否则默认为100vw（全视口）。
<img sizes="(max-width: 480px) calc(100vw - 10px), 480px" src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
如果您可以在CSS中设置宽度，您也可以使用lazySize自动为您计算大小。
懒散的人：
<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
-
问题内容： 我正在尝试创建一个响应式的图像网格（带有描述），当将鼠标悬停在该网格上时，它将具有颜色叠加层（仅图像而不是文本）。由于图像的响应高度，我遇到了一个问题，即覆盖层覆盖了所有内容，而不仅仅是图像。 有什么办法可以解决这个问题？ 为了方便理解，我在这里重新创建了该问题：http : //jsfiddle.net/r8rFc/ 这是我的HTML： 而我的CSS： 提前致谢！ 问题答案： 向包含
-
我在img标记中使用.img响应类。图像非常小（42K），但当加载页面时，图像显示几秒钟相当大，直到缩小到适合容纳它的元素的大小为止。 我应该如何使用bootstrap处理响应性元素？
-
我开始使用响应图像，我有点怀疑。 我有一个图标。我的网站上的图标总是有两种尺寸：一种是74像素宽的小版本，另一种是94像素宽的大版本。 我使用imgix为大图标创建了这个srcset。我检查了这些图像，并以正确的方式调整了它们的大小，1x是94像素宽，2x是188像素宽。 我修正了94的大小，因为在大版本中，图像总是94像素。 现在我的问题是：对于74像素版本，所以小图标，我必须使用74px来重新
-
问题内容： 嗨，我正在尝试使用bootstrap在我的wordpress网站上制作轮播。我想在其旁边放置四个块链接。我在那里有块，图像滚动良好，但是我相信轮播会改变图像的高度。 我有图像（640 x 360），并且将4个块设置为90像素高。我这样做是为了使块与转盘底部齐平。除了块太大。我不明白这可能是什么问题。而且我搜索了所有CSS。 这是我的代码： 问题答案： 调整图像大小的原因是因为它流动。您
-
我正在尝试根据设备宽度提供响应/自适应图像。 原始图像： 与Srcset： 我面临两个问题： 1）即使在较小的设备上（如iPhone 6s），也会加载宽度为2000px的图像（它应该加载800px图像）。 2）我已经把两个图像（有和没有srcset）放在一起。它们都加载了具有相同维度的图像。然而，与其他版本相比，带有srcset的版本显得较小。因为html/css中没有指定宽度，所以它应该以实际图
-
问题内容： 我有一个响应式html布局中的现有图像映射。图像根据浏览器大小缩放，但是图像坐标显然是固定的像素大小。我必须选择哪些选项来调整图像地图坐标的大小？ 问题答案： 您也可以使用svg代替图像映射。