使用百分比值调整图像大小，同时更改其宽高比

Question

我想仅使用百分比值设计我的迷你页面，以便适应各种分辨率。我的问题是，当我在所有“img”标签上的“height”和“width”CSS值中使用百分比值时，它们会正确缩放，但它们的宽高比保持不变，导致如下所示：DEMO

我的问题是如何使它们具有1：1的宽高比？

这是我的代码：

img {

width: 20%; height:20%;
margin: 2% 2% 2% 2%;
padding: 0 0 0 0;
border: 2px solid #666;
opacity:0.5;
float:left;
}

Answer 1

添加并尝试

    img {
        border: 0;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }



     #logo {
        width: 20%;
        margin: 2% 2% 2% 2%;
        padding: 0 0 0 0;
        border: 2px solid #666;
        opacity:0.5;
        float:left;
        }

<div id="logo"><img src="images/logo.png" /></div>

Answer 2

为此，您需要将所有图像放在相同的px值中，这样当您按照所需的宽高比例调整它们时，它将保持其宽高比。例如，如果图像原始大小为1000 x 1000 px，如果在％age中调整大小，则宽度和高度将根据方形进行缩放，因为宽度和高度都相等。如果你想要它们在一致的方面，所有都应该具有统一的像素值。