使用 CSS 按比例更改图像大小

这是 CSS 调整大小的一个已知问题。除非所有图像具有相同的比例，否则您无法通过 CSS 做到这一点。

最好的方法是拥有一个容器，并调整图像的一个尺寸（始终相同）。在我的示例中，我调整了宽度。

如果容器具有指定的尺寸（在我的示例中为宽度），当告诉图像宽度为 100% 时，它将使其成为容器的整个宽度。高度处的 auto 将使图像的高度与新宽度成比例。

例子：

HTML：

<div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS：

.container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}

---

您需要固定一侧（例如高度）并将另一侧设置为 auto。

例如，

 height: 120px;
 width: auto;

这将仅基于一侧缩放图像。如果您发现可以接受裁剪图像，则可以设置

overflow: hidden;

到父元素，这将裁剪掉任何超出其大小的内容。

---

您可以使用 object-fit CSS 3 属性。就像是：

不过，这并不完全是您的答案，因为它不会拉伸容器。但它的行为类似于图库，您可以继续设置 img 本身的样式。

此解决方案的另一个缺点仍然是对 CSS 3 属性的支持不佳。此处提供了更多详细信息：CSS 3 Object-fit Polyfill。在那里也可以找到一个 jQuery 解决方案。

---

要使图像可调整/灵活，您可以使用：

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

---

如果您不想拉伸图像，请将其放入 div 容器中而不会溢出，并在需要时通过调整其边距将其居中。

图像不会被裁剪 纵横比也将保持不变。

HTML

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

---

把它作为你的持有人的背景，例如

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
&nbsp;
</div>

这将使您的图像居中在一个 120x120 div 内，以切断任何多余的图像

---

transform: scale(0.5);

例子：

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

请参阅scale()。

---

这有助于我轻松地将图像制作为 150%。

.img-popup img {
  transform: scale(1.5);
}

---

现在这应该更多地作为最后的手段，但你可以简单地做数学。例如，假设您有一个宽度为 595，高度为 300 的图像。您将通过执行 300/595 = 0.504 创建一个单位速率。然后，您将插入一个您希望将图像更改为 (1000px) 的宽度。 1000 x 0.504 = 504。这意味着如果要保持成比例，如果宽度为 1000，则图像的高度应为 504。

---

如果您知道纵横比，则可以使用 padding-bottom 和百分比来根据差异的宽度设置高度。

<div>
   <div style="padding-bottom: 33%;">
      I have 33% height of my parents width
   </div>
</div>

---