【问题标题】：Calculate best dimensions for image based on height and width of container根据容器的高度和宽度计算图像的最佳尺寸
【发布时间】：2017-10-28 09:59:26
【问题描述】：

如果我有一个固定宽度为 500 像素、高度为 500 像素的容器以及一个宽度为 600 像素、高度为 1200 像素的图像，那么计算尺寸的最佳方法是什么？容器同时保留图像的纵横比？

如果图像更小，则按容器的宽度和高度；没做什么。

根据上面的示例尺寸，我知道图像的最佳尺寸是：

宽度 = 250 高度 = 500

但是我需要执行什么计算才能实现这一点？

【问题讨论】：

我正在寻找专门的 JS 解决方案。
object-fit，加上适用于旧版浏览器的 JS polyfill。
Scale down image to fit div的可能重复

标签： javascript image math

【解决方案1】：

如果要显示图像，如果您的图像始终是垂直的，请使用max-height:100%; width:auto。

这样做的目的是确保您的图像始终具有最大的高度（即与其所在的容器相同），同时保持其宽度（= 相同的 AR，但大小灵活）

【讨论】：

【解决方案2】：

您必须首先确定是图像的高度还是宽度导致了图像的缩小。然后基于此确定图像的 w/h 的纵横比。然后将高度或宽度的最大值设置为 500，并将其乘以纵横比得到图像的其他数字。

在您的示例中，纵横比为 1/2，w/h，由于您将高度缩小到 500，因此宽度应为 1/2 * 500 = 250 作为宽度。

【讨论】：

我特意找JS解决方案
@CLiown 如果 img 是 120x60，你会将 img 放大到 500x250 吗？
@DanielH 不，图像将保持在 120x60
@CLiown 你检查过我的解决方案了吗？使用JS你正在做同样的事情来确定高度与宽度的比率然后将宽度设置为100％高度自动或相反，你仍然使用JS来设置img CSS规则，你不能避免CSS，如果你能做到用纯 CSS 为什么要用 JS+CSS？
正如我所说，我正在寻找 JS 解决方案，我不是在寻找 CSS 或 JS + CSS 解决方案。 @丹尼尔H

【解决方案3】：

您可以使用图像作为容器div的背景，背景大小适合覆盖，这将帮助您自动实现。

.container {
  height: 500px;
  width: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

&lt;div class="container" style="background-image: url('http://lorempixel.com/600/1200/cats/1/')"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

JS：

$('.myimg').css('max-height', '100%');
$('.myimg').css('max-width', '100%');

.container {
  height: 500px;
  widtH: 500px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bggreen{
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="myimg" src="http://placehold.it/600x1200">
</div>
<hr>
<div class="container bggreen">
  <img class="myimg" src="http://placehold.it/60x120">
</div>
<hr>
<div class="container">
  <img class="myimg" src="http://placehold.it/120x60">
</div>
<hr>
<div class="container bggreen">
  <img class="myimg" src="http://placehold.it/1200x600">
</div>

使用 CSS 解决方案非常简单：

将 img 设置为 max-height: 100%; 和 max-width: 100%;:

.container {
  height: 500px;
  widtH: 500px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myimg {
  max-height: 100%;
  max-width: 100%;
}

.bggreen {
  background: green;
}

<div class="container">
  <img class="myimg" src="http://placehold.it/600x1200">
</div>
<hr>
<div class="container bggreen">
  <img class="myimg" src="http://placehold.it/60x120">
</div>
<hr>
<div class="container">
  <img class="myimg" src="http://placehold.it/120x60">
</div>
<hr>
<div class="container bggreen">
  <img class="myimg" src="http://placehold.it/1200x600">
</div>

【讨论】：