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

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

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

我得到的图像都是相同的大小，但长宽比被拉长，破坏了图像。是否有一种方法可以改变图像容器的大小而不是图像的大小？允许我保持高宽比，但调整图像的大小仍然。(我不介意剪掉一些图像。)

856442 次浏览
小开

您需要修复一侧(例如，高度) ，并将另一侧设置为 auto。

比如说,

 height: 120px;
width: auto;

这将缩放图像的基础上只有一面。如果您觉得裁剪图像是可以接受的，您可以直接设置

overflow: hidden;

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

小开
最佳答案

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

把它作为你持有者的背景资料。

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

这将在一个120x120分辨率的图像中心切除任何多余的图像

小开

你可以使用 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本身。

这个解决方案的另一个缺点是对 CSS3属性的支持仍然很差。更多详情请点击这里: CSS3对象适合填充。在那里也可以找到 jQuery 解决方案。

小开

要使图像可调整/灵活，你可以使用以下方法:

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

如果知道高宽比，可以使用带百分比的 paddingbottom 根据 diff 的宽度设置高度。

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

如果不想拉伸图像，可以将其放入没有溢出的 div 容器中，并在需要时调整其边距使其居中。

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

超文本标示语言

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

参见 ()。

小开

这有助于我使图像150% 轻松。

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

现在这应该是最后的手段，但你可以简单地做数学。例如，假设您有一个宽度为595、高度为300的图像。你可以用300.595 = 0.504来创建一个单位汇率。然后，插入要将图像更改为(1000px)的宽度。1000 x 0.504 = 504.这意味着如果宽度是1000，如果你想保持它的比例，图像的高度应该是504。


提交答案