CSS如何讓圖片滿屏呢?我們可以使用以下方法:
img { width: 100%; height: 100%; object-fit: cover; }
上面的代碼中,我們使用了width
和height
屬性將圖片的寬度和高度設置為100%。這樣就能夠讓圖片占滿整個屏幕。
但是,在某些情況下,圖片的比例與屏幕比例不完全匹配,這時候圖片可能會被壓縮或拉伸,影響視覺效果。這時候我們可以使用object-fit: cover;
屬性,將圖片填充滿整個區域,并保持圖片比例不變。
如果你想讓圖片在滿屏的同時保持完整比例,可以使用以下代碼:
img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
這樣就能夠讓圖片在滿屏的同時不失真。其中max-width: 100%
和max-height: 100%
屬性保證了圖片不會超出父容器的范圍,從而保持了比例。