CSS可以實(shí)現(xiàn)引入圖片縮小的效果,可以通過設(shè)置標(biāo)簽的寬度和高度來實(shí)現(xiàn)圖片縮小。
img { width: 50%; height: auto; }
上面的代碼可以將圖片寬度設(shè)置為父容器寬度的一半,高度會(huì)根據(jù)寬度自適應(yīng),保持圖片原有的寬高比例,從而實(shí)現(xiàn)圖片縮小的效果。
如果需要設(shè)置固定寬高比例縮小圖片,則可以通過設(shè)置max-width和max-height以及設(shè)置固定的寬高比例來實(shí)現(xiàn)。
img { max-width: 50%; max-height: 50%; /* 固定寬高比例 */ aspect-ratio: 4/3; }
上面的代碼可以將圖片最大寬度和最大高度設(shè)置為父容器的50%,同時(shí)也設(shè)置了固定的寬高比例為4:3,從而實(shí)現(xiàn)按比例縮小圖片,保持圖片的寬高比例不變的效果。