javascript - 根据容器的高度和宽度计算图像的最佳尺寸

Question

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

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

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

宽度 = 250 高度 = 500

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

Answer 1

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>