javascript - 仅在需要时拉伸(stretch)图像最多 20%

Question

我们有一个具有响应大小的图片库，使用 ready made React gallery .

图像需要适应具有预定义的响应式高度和宽度的容器，但我们从服务器获取的图像具有不同的比例和大小:有时比例不匹配，有时图像不匹配大到甚至可以装满容器。

产品要求是图像只能缩放到原始图像大小的 20% 以适合容器:

我什至如何在 CSS 中引用原始图像大小？ 如果我使用百分比表示容器大小...我偶然发现了 Object-fit 但它在 IE 上不受支持。

我考虑过使用 JS 中的内联样式，但这会很复杂，因为这是响应式的，并且需要在每次调整窗口大小时重新计算大小。

谢谢。

Answer 1

有两种情况:

1. 如果你正在参加 <img>在你的容器里

.container
{
  width:100%;
  height:300px;
}
.container img
{
  min-height:100%;
  min-width:100%;
  max-height:100%;
  max-width:100%;
}

<div class="container">
  <img src="https://regmedia.co.uk/2015/11/16/help_2.jpg">
</div>

1. 如果您将图像设为 background容器的

.container
{
  background-image: url('https://regmedia.co.uk/2015/11/16/help_2.jpg');
  background-size: 100% 100%;
  width:80%;
  height:200px;
}

<div class="container">
</div>