將圖像的最大寬度設(shè)置為100％ . 高度應(yīng)設(shè)置為自動(dòng) .

Solution 1 ：當(dāng)圖像長(zhǎng)到其父div的寬度時(shí)：

.wrapper {

width: 500px;

height: 500px;

border: 1px solid red;

position: absolute;

}

.wrapper img {

/*width:100%;*/

height: auto;

max-width: 100%;

}

Solution 2 ：最初圖像寬度將受max-width屬性的限制，以保持在縮略圖大小范圍內(nèi) .

單擊圖像，刪除縮略圖類，以便它自然地使父級(jí)流動(dòng)到其原始大小

.wrapper {

width: 100px;

height: 100px;

border: 1px solid red;

/*position: absolute;*/

}

.wrapper img.thumbnail {

/*width:100%;*/

height: auto;

max-width: 100%;

}

Initially

On click

總結(jié)

以上是生活随笔為你收集整理的img标签保持纵横比html,无论容器如何，使img增长到最大宽度/高度并保持纵横比...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。