2
我有一個圖像,我想永遠是100vw
& 100vh
無論屏幕分辨率或視圖端口。不過,我想保留某種縱橫比來避免圖像的拉伸和傾斜。圖像與100vh,但保持長寬比
這就是我到目前爲止所能得到的與長寬比相配的工作,但並不總是100vh
。我可以做到這一點,因此圖像標記在視圖端口外部負面溢出以保持圖像質量並保持高度100vh
。
<div class="hero-img">
<div class="hero-wrapper">
<div class="hero-imgs"></div>
<img src="myimg.png" alt="my hero img" />
</div>
</div>
樣式
.hero-img{
display:table;
height:100vh;
.hero-wrapper{
display:table-row;
.hero-imgs{
display:table-cell;
vertical-align:middle;
text-align:center;
}
img{
display:inline-block;
}
}
}
你好,這可以作爲一個高度規則然而,當瀏覽器縮小到移動設備的視口的圖像,因爲擠壓。有沒有辦法將圖像拉出到150%的寬度,例如以消除拉伸? – Sam
@ user1910046更新爲2:nd樣本,其中圖像更寬。這不會被壓扁,所以必須有其他一些CSS阻止它超出視口 – LGSon