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

【问题标题】：Changing image sizes proportionally using CSS使用 CSS 按比例更改图像大小
【发布时间】：2013-03-19 02:48:24
【问题描述】：

我已经尝试了几天来配置我的缩略图库，以便所有图像都显示相同的高度和宽度。但是，当我将 CSS 代码更改为时，

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

我得到的图片大小都一样，但是纵横比被拉伸，破坏了图片。有没有办法调整图像容器而不是图像的大小？允许我保持纵横比，但仍然调整图像大小。（我不介意我剪掉一些图像。）

【问题讨论】：

标签： html css gallery lightbox

【解决方案1】：

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

例如，

 height: 120px;
 width: auto;

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

overflow: hidden;

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

【讨论】：

我已经尝试过了，但它仍然给我所有不同大小和形状的图像我希望画廊像这样统一，[] [] [] [] 不像 [] [] [ ] [ ] []
结合使用以上两种方法：将高度设置为一个数字（使用自动宽度保持缩放），并使用overflow: hidden 将父级限制为特定宽度以裁剪多余部分

【解决方案2】：

这是 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;
}

【讨论】：

【解决方案3】：

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

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

这会将您的图像居中在一个 120x120 的 div 内，从而切掉多余的图像

【讨论】：

【解决方案4】：

您可以使用object-fit CSS 3 属性。比如：

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

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

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

【讨论】：

谢谢，很好的解决方案。 :)
用仅在 opera atm 中支持的属性来回答这有点奇怪？！ caniuse.com/object-fit
我明白你的意思，@Simon，谢谢。我提到我不知道该属性是否会在所有地方都得到支持，但是即使它不会，我们也可以将它作为谷歌的起点，以寻找替代它的alternatives .发布的另一个原因是，当浏览器每天都在变得更好时，答案会保留一段时间，所以我也回答了针对不久的将来。
几年后来到这个页面，我很高兴找到这个“未来”的答案！

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

如果您不想拉伸图像，请将其放入 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;
}

【讨论】：

【解决方案8】：

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()。

【讨论】：

【解决方案9】：

这有助于我轻松地将图像设置为 150%。

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

【讨论】：