如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
我刚刚发布了一个jQuery插件,它可以满足您的需要,提供了很多选项:
https://github.com/GestiXi/image-scale
用法:
HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
JavaScript
$(function() {
$("img.scale").imageScale();
});
其他回答
不要将显式宽度或高度应用于图像标记。相反,给它:
max-width:100%;
max-height:100%;
此外,高度:自动;如果只想指定宽度。
例子:http://jsfiddle.net/xwrvxser/1/
国际货币基金组织{最大宽度:100%;最大高度:100%;}.肖像{高度:80px;宽度:30px;}.景观{高度:30px;宽度:80px;}.方形{高度:75px;宽度:75px;}纵向分区<div class=“纵向”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>景观部<div class=“landscape”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>方形分区<div class=“square”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>
下面的代码改编自以前的答案,由我使用名为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>
本文可能会帮助您:
.方形{位置:相对;宽度: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>
如果您使用Bootstrap,只需将img响应类添加到img标记:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
引导映像
让它变得简单!
给容器一个固定的高度,然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是,您将宽度设置为100%,而不是最大宽度。