107

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

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

我得到的都是相同大小的图像，但是长宽比却被拉伸破坏了图像。有没有办法调整图像容器的大小，而不是图像？让我保持宽高比。但仍要调整图像大小。（我不介意我剪掉一些图像。）

提前致谢！

— 贝妮
source

184

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

— 杰克·乔
source

41

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

例如

 height: 120px;
 width: auto;

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

overflow: hidden;

到父元素，它将裁剪出超出其大小的所有内容。

— 尼克·安德里奥波洛斯
source

我已经尝试过了，但是它仍然为我提供了所有大小和形状都不同的图像，我希望图库是一样的，[] [] [] []不像[] [] [] [] []

— Beaniie

2

结合使用以上两种方法：将高度设置为一个数字（使用自动宽度以保持比例），并将父级限制为特定宽度overflow: hidden以裁剪多余的部分

— Nick Andriopoulos

25

您可以使用object-fitcss3属性，例如

<!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本身进行样式设置。

该解决方案的另一个缺点是对css3属性的支持仍然很差。此处提供了更多详细信息：http : //www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/。jQuery解决方案也可以在那找到。

— 德米特里·罗曼诺夫
source

谢谢，很好的解决方案。:)

— Bibhu

用仅在Opera atm中支持的属性来回答这个问题有点奇怪？caniuse.com/object-fit

— SimonDragsbæk13年

4

我明白你的意思，@ Simon，谢谢。我说过我不知道该属性是否会在任何地方得到支持，但是即使不支持该属性，我们也可以将其用作Google 替代它的替代方案的起点。发布的另一个原因是，随着浏览器的日趋完善，答案会保留一段时间，因此我也针对不久的将来做出了回答。

— dmitry_romanov

1

几年后来到此页面，我很高兴找到这个“未来”的答案！

— petzi

8

要使图像可调/灵活，可以使用以下方法：

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

— 斯坦尼斯拉夫
source

5

将其作为背景放在您的持有人上，例如

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

这会将您的图片居中放置在120x120格内，以去除多余的图片

— 迪基男孩
source

2

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

— 布山丹戈尔
source

0

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

参见：https : //developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— 马哈茂德K.
source

-1

如果您知道斑点率，则可以使用padding-bottom和百分比来设置diff的最高值。

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

— 记录
source

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

HTML：

CSS：

例：