詳情中 有各種寬高的 圖片 如何才能最優(yōu)的顯示
完美解決 如果 圖片寬度 小于 屏幕寬度 不處理 高度自適應(yīng)
大于 屏幕寬度 則 設(shè)置為 屏幕寬度 如下代碼 就可以 解決這個(gè)問題
>>> img {
max-width: 100%;
/* width: 100% !important; */
height: auto !important;
}
拓展
4窗宇、 js 方法應(yīng)該比較通用贡这，可以兼容多版本瀏覽器感帅。
var img = document.getimgmentById("img");
var div = document.getimgmentById("div");
img.onload = function () {
if (img.naturalHeight < div.offsetHeight) {
img.style.width = "auto";
img.style.height = "100%";
}
}
6一喘、一個(gè)原始的方法
圖片等比例縮放娶吞，多余部分空白填補(bǔ)：
ul li {
width: 200px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
ul li img {
max-height: 100%;
max-width: 100%;
}
2畴栖、object-fit
object-fit CSS 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框抗斤，不支持IE。
可用屬性：
fill 不保持縱橫比縮放圖片畜伐，使圖片完全適應(yīng)
contain 保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)
cover 保持縱橫比縮放圖片躺率，只保證圖片的短邊能完全顯示出來(lái)
none 保持圖片寬高不變
scale-down 當(dāng)圖片實(shí)際寬高小于所設(shè)置的圖片寬高時(shí)玛界，顯示效果與none一致；否則悼吱，顯示效果與contain一致
inherit 繼承
initial 默認(rèn)值
unset 繼承父元素慎框，若父元素沒有屬性則顯示默認(rèn)值
CSS：
ul>li>img{
width: 150px;
height: 100px;
}
ul>li:nth-child(1)>img{
object-fit: fill;
}
ul>li:nth-child(2)>img{
object-fit: contain;
}
ul>li:nth-child(3)>img{
object-fit: cover;
}
ul>li:nth-child(4)>img{
object-fit: none;
}
ul>li:nth-child(5)>img{
object-fit: scale-down;
}
1后添、背景圖法
通過(guò)背景圖的 background-position 屬性笨枯，可以使圖片居中顯示。國(guó)外一些網(wǎng)站有看到類似的案例，簡(jiǎn)單好操作馅精。
.box1{
background: url("https://hbimg.huabanimg.com/42d38784a9e5ad1cbce090966a7a87c274f5d27ba616-VMBaO0_fw658") no-repeat center center;
background-size: auto 100%;
}
這樣可以顯示完整的圖片严嗜，不變形：
若要圖片填滿容器洲敢，可以將 background-size 屬性改為 100% auto ：
background-size: 100% auto;
如下圖：
同樣 background-size 的 contain （完整顯示）和 cover （填充）屬性也能起到相同的效果。
css auto簡(jiǎn)介
css中的auto是自動(dòng)適應(yīng)的意思压彭，而在css中auto往往都是默認(rèn)值睦优。
正如margin:0 auto，意思就是上下邊距為0壮不，左右邊距為auto汗盘，就是自動(dòng)適應(yīng)。
Width:auto 這樣寬度就是自動(dòng)询一，隨內(nèi)容增加而增寬隐孽，隨瀏覽器寬度而換行。
