我已经尝试了几天来配置我的缩略图库,以便所有图像都显示相同的高度和宽度。但是,当我将 CSS 代码更改为时,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
我得到的图像大小都相同,但纵横比被拉伸,破坏了图像。有没有办法调整图像容器的大小而不是图像的大小?允许我保持纵横比,但仍调整图像大小。 (我不介意剪掉一些图像。)
这是 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;
}
您需要固定一侧(例如高度)并将另一侧设置为
auto
。
例如,
height: 120px;
width: auto;
这将仅根据一侧缩放图像。如果你觉得裁剪图像可以接受,你可以设置
overflow: hidden;
到父元素,这将裁剪掉任何超出其大小的内容。
您可以使用
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 解决方案。
要使图像可调整/灵活,您可以使用此:
/* fit images to container */
.container img {
max-width: 100%;
height: 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;
}
参见 scale()。
将其作为支架上的背景,例如
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
</div>
这会将您的图像置于 120x120 div 的中心,并剪掉图像的任何多余部分
如果您不想拉伸图像,请将其放入 div 容器中而不溢出,并根据需要调整其边距使其居中。
<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>
div#container {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 4px;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
这帮助我轻松地将图像放大 150%。
.img-popup img {
transform: scale(1.5);
}
现在这应该是最后的手段,但你可以简单地做数学。例如,假设您有一个宽度为 595、高度为 300 的图像。您可以通过执行 300/595 = 0.504 创建单位比率。然后,您将插入您想要将图像更改为的宽度(1000px)。 1000 x 0.504 = 504。这意味着如果要保持比例,如果宽度为 1000,则图像的高度应为 504。
如果您知道纵横比,则可以使用 padding-bottom 和百分比来根据差异的宽度设置高度。
<div>
<div style="padding-bottom: 33%;">
I have 33% height of my parents width
</div>
</div>