CSS可以很方便地將圖片設置為全屏,經常用在背景圖和輪播圖等場景中。下面是一些示例代碼。
/* 將圖片平鋪到整個窗口 */ body { background-image: url('image.jpg'); background-size: cover; } /* 將圖片覆蓋整個窗口 */ img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* 將圖片調整到屏幕中心 */ img { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; object-fit: cover; }
其中,background-size: cover
會將背景圖片擴展到與窗口一樣大,并盡可能鋪滿整個屏幕。而對于標簽,應使用position: fixed
和width: 100%; height: 100%
來將其覆蓋到整個窗口。另外,object-fit: cover
可以讓圖片等比例縮放以填充整個父容器。
需要注意的是,對于移動設備,應使用background-attachment: fixed
或者javascript等方法以避免性能問題。
下一篇mysql基礎用法