如果需要，最多可将图像拉伸 20%答案

【问题标题】：Stretch images if needed only up to 20%如果需要，最多可将图像拉伸 20%
【发布时间】：2017-01-09 00:49:42
【问题描述】：

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

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

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

如何在 CSS 中引用原始图像大小？ .

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

谢谢。

【问题讨论】：

您是用background 还是<img> 标签拍摄图像？
首先想到的是一些像 max-width:120%; max-height:120% 这样的 css - 但我知道过去，在图像中指定这样的东西可能会被击中和错过
我目前正在使用<img> 标签，但我认为这不是问题所在。事实上，max-width:120%; max-height:120 并没有做到这一点——我需要参考实际的图像尺寸，而不是 DOM 元素。

【解决方案1】：

可能有两种情况：

.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>

.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>

【讨论】：