124

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

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

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

4

9 回答 9

203

这是 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;
}
于 2013-03-28T15:27:23.483 回答
47

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

例如，

 height: 120px;
 width: auto;

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

overflow: hidden;

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

于 2013-03-28T15:23:32.657 回答
29

您可以使用object-fitCSS 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 解决方案。

于 2013-07-08T05:23:26.403 回答
9

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

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
于 2014-04-30T17:08:09.863 回答
5

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

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

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

于 2013-03-28T15:27:39.030 回答
5

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

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

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;
}
于 2020-03-13T21:31:52.817 回答
4 
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;
}

见比例（）。

于 2020-08-12T20:49:40.603 回答
2

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

.img-popup img {
  transform: scale(1.5);
}
于 2020-09-21T17:33:14.130 回答
-1

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

<div>
   <div style="padding-bottom: 33%;">
      I have 33% height of my parents width
   </div>
</div>
于 2016-01-13T20:59:57.673 回答