Question

我有一些大小以英寸为单位的图形：

4.25 x 6.875
5.5 x 8.5
6 x 9
8.5 x 8.5
8.264 x 11.694

我想对图形进行简化预览（我将迭代所有尺寸，我想要显示每个图像，只有一个DIV）但我想保存纵横比。我想知道这将是DIV的最佳尺寸，以避免每张图像变形。

Answer 1

如果您在图片上设置了max-width和max-height，但未设置height或width，则图片将被限制为您的尺寸在保持纵横比的同时定义。

示例：

<img src="big_image.png" style="max-width: 100px; max-height: 100px;" />

如果big_image.png为4000 x 2000像素，则会将其渲染为100 x 50。

Answer 2

我的例子用css控制图像的大小和div。 div设置为auto，因此它会根据图像的大小进行调整。您可以一次快速控制图像的大小，而不是在html代码中逐个调整它们。

http://jsfiddle.net/KzXFm/

HTML

<div id='container'>
    <ul>
     <li>   
    <img src="http://static.dezeen.com/uploads/2009/01/2-port-house-antwerp-by-zaha-hadid-architects-sqwu-2port-house_antwerp_02.jpg">
        </li>
          <li>  
    <img src="http://static.dezeen.com/uploads/2009/01/2-port-house-antwerp-by-zaha-hadid-architects-sqwu-2port-house_antwerp_02.jpg">
        </li>
          <li>  
    <img src="http://static.dezeen.com/uploads/2009/01/2-port-house-antwerp-by-zaha-hadid-architects-sqwu-2port-house_antwerp_02.jpg">
        </li>
    </ul>
</div>

CSS

#container{
    max-width:auto;
    max-height: auto;
    background: red;
}

img {
    max-width:20%;
    max-height: 20%;
}

CSS保存图像宽高比

2 个答案: