CSS中,圖片的居中對齊和拉伸是比較常見的樣式需求。
/* 圖片水平垂直居中對齊 */ .container { display: flex; justify-content: center; align-items: center; } /* 圖片拉伸 */ img { width: 100%; height: auto; }
上述代碼中,我們使用了flex布局來實(shí)現(xiàn)圖片的水平垂直居中對齊,同時(shí)將圖片的寬度設(shè)為100%,高度自適應(yīng),實(shí)現(xiàn)拉伸效果。
需要注意的是,這種方式的居中對齊和拉伸只適用于父元素和圖片大小不確定的情況。如果圖片大小已知,則可以使用背景圖或者設(shè)置固定寬高來實(shí)現(xiàn)。
上一篇java遞減和