CSS控制圖片自動(dòng)縱向平鋪的方法

在CSS中，我們可以使用多種方法來(lái)控制圖片的平鋪，這篇文章將介紹如何使用CSS讓圖片自動(dòng)縱向平鋪。

一、使用CSS的height屬性

我們可以使用CSS的height屬性來(lái)設(shè)置圖片的高度，從而實(shí)現(xiàn)圖片的縱向平鋪，如果我們想要讓圖片的高度充滿整個(gè)容器，可以使用以下代碼：

img {
  height: 100%;
}

二、使用CSS的object-fit屬性

CSS的object-fit屬性可以用來(lái)控制圖片在容器中的填充方式，我們可以將其設(shè)置為cover，這樣圖片就會(huì)根據(jù)容器的寬度和高度進(jìn)行等比縮放，從而實(shí)現(xiàn)圖片的縱向平鋪。

img {
  object-fit: cover;
  height: 100%;
}

三、使用CSS的position屬性

我們還可以使用CSS的position屬性來(lái)將圖片固定在容器的底部，從而實(shí)現(xiàn)圖片的縱向平鋪。

img {
  position: absolute;
  bottom: 0;
  height: 100%;
}

三種方法都可以實(shí)現(xiàn)圖片的縱向平鋪，具體使用哪種方法可以根據(jù)實(shí)際需求進(jìn)行選擇。