JS：

Question

如果我的容器有500px的固定宽度和500px的高度以及宽度为600px且高度为1200px的图像，那么计算尺寸的最佳方法是我需要将图像设置为＆＃39; ＃39;在容器内保留图像的纵横比？

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

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

宽度= 250 高度= 500

但实现这一目标需要进行哪些计算？

Answer 1

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

在你的例子中，纵横比是1/2，w / h，因为你将高度缩小到500，宽度应该是1/2 * 500 = 250作为宽度。

Answer 2

JS：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

这样做的目的是确保你的影像总是拥有它所能拥有的最大高度（即与它所在的容器相同），同时保持它的宽度（=相同的AR，但是灵活的尺寸）

Answer 4

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

＆＃13;

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

＆＃13;

<div class="container" style="background-image: url('http://lorempixel.com/600/1200/cats/1/')"></div>

＆＃13;

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

4 个答案:

JS：

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