在CSS中,我們可以讓圖片無限長,也就是說,無論圖片的實際長度是多少,我們都可以通過CSS來讓它看起來像是沒有盡頭的一樣。
img { width: 100%; height: auto; object-fit: cover; }
在上面的代碼中,我們首先將圖片的寬度設為100%,也就是讓圖片的寬度占據它所在元素的全部空間。
然后,我們將圖片的高度設為auto,這樣在保證圖片的寬度被撐滿的同時,高度會根據圖片的實際尺寸自適應地調整。
最后,我們使用了object-fit屬性來設置圖片的切割方式,這個屬性有三個可選值:
- fill:圖片會被拉伸或壓縮以填滿整個元素,可能會導致圖片變形。
- contain:圖片會按比例縮放,盡量不讓圖片超出元素的范圍,可能會在圖片兩側留出空白。
- cover:圖片會按比例縮放,盡量不讓元素露出空白,可能會裁剪掉圖片寬高比例不合適的部分。
通過使用object-fit: cover,我們可以讓圖片盡量保持比例,并且讓它寬度100%地占據整個元素,從而達到無限長的效果。
上一篇mysql的一些開發規范
下一篇mysql的三大組件