本文介绍了如何自动调整图像大小以适合"div"容器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您如何自动调整大图像的大小,以使其适合较小的div容器,同时保持其宽高比?
How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?
示例:stackoverflow.com-当将图像插入到编辑器面板中且图像太大而无法容纳在页面上时,图像将自动调整大小.
Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.
推荐答案
请勿对图片标签应用明确的宽度或高度.相反,给它:
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
此外,如果仅想指定宽度,则为height: auto;
.
Also, height: auto;
if you want to specify a width only.
示例: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
这篇关于如何自动调整图像大小以适合"div"容器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!