如果需要，拉伸图像最多可达20％

Question

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

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

产品要求是图片只应缩放最多20％的原始图片尺寸以适合容器：

我如何在CSS中引用原始图像大小？如果我使用指向容器大小的百分比...我偶然发现了Add Global Variables但是它不受支持在IE上。

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

谢谢。

Answer 1

可能有两种情况：

1. 如果您在容器内携带<img>
＆＃13;
＆＃13;
.container
{
  width:100%;
  height:300px;
}
.container img
{
  min-height:100%;
  min-width:100%;
  max-height:100%;
  max-width:100%;
}
＆＃13;
<div class="container">
  <img src="https://regmedia.co.uk/2015/11/16/help_2.jpg">
</div>
＆＃13;
＆＃13;
＆＃13;
1. 如果您将图像作为容器的background
＆＃13;
＆＃13;
.container
{
  background-image: url('https://regmedia.co.uk/2015/11/16/help_2.jpg');
  background-size: 100% 100%;
  width:80%;
  height:200px;
}
＆＃13;
<div class="container">
</div>
＆＃13;
＆＃13;
＆＃13;