jquery - 在更改纵横比的同时使用百分比值调整图像大小

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 调整大小，则宽度和高度将根据正方形缩放，因为宽度和高度都相等。如果您希望它们具有一致的外观，则它们都应该具有统一的像素值。