img标签保持纵横比html,无论容器如何，使img增长到最大宽度/高度并保持纵横比...

将图像的最大宽度设置为100％ . 高度应设置为自动 .

Solution 1 ：当图像长到其父div的宽度时：

.wrapper {

width: 500px;

height: 500px;

border: 1px solid red;

position: absolute;

}

.wrapper img {

/*width:100%;*/

height: auto;

max-width: 100%;

}

Solution 2 ：最初图像宽度将受max-width属性的限制，以保持在缩略图大小范围内 .

单击图像，删除缩略图类，以便它自然地使父级流动到其原始大小

.wrapper {

width: 100px;

height: 100px;

border: 1px solid red;

/*position: absolute;*/

}

.wrapper img.thumbnail {

/*width:100%;*/

height: auto;

max-width: 100%;

}

Initially

On click