想讓網頁中的照片沾滿整個屏幕,讓人更好地欣賞圖片,是許多網頁設計師所追求的效果。下面,我們來介紹一下如何使用CSS來實現照片垂直沾滿屏幕。
代碼如下: .img-wrap { display: flex; justify-content: center; align-items: center; height: 100vh; } .img-full { width: 100%; height: 100%; object-fit: cover; }
首先,我們需要創建一個包裹照片的容器,使用Flexbox布局實現垂直水平居中。這個容器需要設定一個固定的高度,可以使用“100vh”(視口高度)來實現,這樣就能讓照片占滿整個屏幕的高度。
接下來,我們將照片的寬度和高度都設為100%,這樣就能讓照片占滿整個容器的空間。此外,我們還可以使用“object-fit: cover”樣式,讓照片自動縮放并填滿整個容器,這樣就能保證照片始終都能沾滿整個屏幕,無論屏幕大小如何。
使用上述代碼可以輕松實現照片垂直沾滿屏幕的效果,讓照片更加美觀動人,給網頁增加更多視覺沖擊力。