使用CSS按比例更改图像大小
使用CSS按比例更改图像大小
提问于 2013-03-28 23:21:31
我已经尝试了几天来配置我的缩略图库，使所有的图像看起来都相同的高度和宽度。但是，当我将CSS代码更改为
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;我得到的图像都是相同大小的，但纵横比被拉伸了，破坏了图像。有没有办法调整图像容器而不是图像的大小？允许我保持宽高比，但调整图像大小不变。(我不介意我剪掉一些图像。)
回答 7
Stack Overflow用户
发布于 2013-03-28 23:23:33
您需要固定一侧(例如，高度)，并将另一侧设置为auto。
例如,
height: 120px;
width: auto;这将仅基于一侧缩放图像。如果你觉得裁剪图片是可以接受的，你可以直接设置
overflow: hidden;添加到父元素，这样就会裁剪出任何超出其大小的内容。
Stack Overflow用户
发布于 2013-07-08 13:23:26
您可以使用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解决方案。
Stack Overflow用户
发布于 2014-05-01 01:08:10
要使图像可调/灵活，您可以使用以下命令：
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15685666
复制相关文章
相似问题