HTML：

Question

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

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

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

提前致谢！

Answer 1

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

Answer 2

您需要修复一侧（例如身高）并将另一侧设为auto。

例如

 height: 120px;
 width: auto;

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

overflow: hidden;

到父元素，它会裁掉任何超出其大小的东西。

Answer 3

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

<!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解决方案也可以在那里找到。

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

Answer 8

如果你知道这个比例，你可以使用padding-bottom和百分比来设置高度，具体取决于差异。

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

Answer 9

这有助于我轻松地将图像制作成150％。

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

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

9 个答案:

HTML：

CSS：

示例：