如何自动调整图像大小以适合div容器 [英] How do I auto-resize an image to fit a div container

问题描述

如何自动调整大型图片的大小，以适应较小宽度的div容器，同时保持其宽高比？

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's 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%;

示例： 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容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！