Question

我正在实施一种设计，它具有固定高度的全宽图像（或者高度仅在某些断点处发生变化）。我希望图像始终填充其容器，同时保持其纵横比。

如果我将其作为背景图片实现，则添加background-size: cover：

非常简单

.cover {
  width: 100%;
  height: 500px;
  background-image: url(myimage.jpg);
  background-size: cover;
  background-position: center;
}

http://jsfiddle.net/h7542mys/

如果您尝试调整浏览器窗口的大小，您会看到图像覆盖整个区域，实际上是通过缩放图像来实现的。

问题是我想根据分辨率更改图像源，这样我就不必为移动设备提供巨大的资源。如果我在构建时知道图像URL，我可以使用媒体查询，但是，这些是动态图像，我只知道运行时的URL。

在运行时，我可以为裁剪和调整大小的图像生成图像URL，所以理想情况下我想做类似的事情：

<div class="cover">
  <img src="getImageUrl('image.jpg', 320, 500)" srcset="getImageUrl('image.jpg', 320, 500) 320w, getImageUrl('image.jpg', 640, 500) 640w, getImageUrl('image.jpg', 1000, 500) 1000w" sizes="100vw">
</div>

然后以某种方式让图像像背景图像一样填充容器。但是，如果我为图片提供height和width 100%，那么显然只会延伸。给图像min-width: 100%将其设置为与其父图像一样宽，但高度将更小。

我能够让它工作的唯一方法是使用object-fit: cover，但浏览器支持非常糟糕，而我发现的polyfill却无法使用srcset： http://jsfiddle.net/Lctosbru/

基本上，我希望获得与background-size: cover或object-fit: cover相同的效果。有没有办法做到这一点？

具有固定高度的响应动态图像

0 个答案: