如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
检查我的答案,使图像响应-最简单的方法-
img{
width: 100%;
max-width: 800px;
}
其他回答
下面的代码改编自以前的答案,由我使用名为storm.jpg的图像进行测试。
这是显示图像的简单页面的完整HTML代码。这很完美,我用www.resizemybrowser.com测试过。把CSS代码放在HTML代码的顶部,放在你的头部下面。把图片代码放在你想要的地方。
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
我看到很多人都建议对象匹配,这是一个不错的选择。但是,如果您希望它也能在较旧的浏览器中工作,还有另一种方法可以轻松实现。
这很简单。我采用的方法是将图像放置在容器内,然后使用组合将其放置在中心:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
一旦它在中心,我给图像,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使图像获得对象拟合的效果:覆盖。
以下是上述逻辑的演示。
https://jsfiddle.net/furqan_694/s3xLe1gp/
此逻辑适用于所有浏览器。
本文可能会帮助您:
.方形{位置:相对;宽度:300px;高度:300px;溢出:隐藏;}国际货币基金组织{位置:绝对;最大宽度:100%;宽度:100%;高度:自动;顶部:50%;左:50%;转换:转换(-50%,-50%);}img.景观{高度:100%;宽度:自动;}<div class=“square”><img src=“https://unsplash.it/400/500“alt=”图像“/></div><div class=“square”><img src=“https://unsplash.it/500/400“class=”landscape“alt=”图像“/></div>
简单的CSS解决方案:如何将不同尺寸的图像放在集合容器中(2017-05-01)
.方形{位置:相对;宽度:441px;高度:200px;溢出:隐藏;边框:1px实心黑色;}国际货币基金组织{最大宽度:100%;/*宽度:100%*/<----它拉伸图像并适合父对象高度:自动;/*转换:转换(-50%,-50%)*/<-----设置垂直和水平中心}img.景观{高度:100%;宽度:自动;}<div class=“square”><img src=“https://cdn.pixabay.com/photo/2020/08/28/12/32/man-5524488__340.jpg“alt=”图像“/></div>
下面是一个简单的解决方案(4步修复!!),似乎对我有用。该示例使用宽度来确定整体大小,但也可以翻转宽度以使用高度。
将CSS样式应用于图像容器(例如,<img>)将宽度属性设置为所需的尺寸对于尺寸,使用%表示相对大小或自动缩放(基于图像容器或显示)对静态维度或集合维度使用px(或其他)将高度属性设置为根据宽度自动调整享受!
例如
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
一个简单的解决方案是使用Flexbox。将容器的CSS定义为:
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/* Any custom height */
}
将包含的图像宽度调整为100%,您将在容器中获得一个保持尺寸的居中图像。