除了使用上述的CSS規則之外,我們還可以使用其他的方法來控制圖片位置和大小。比如,我們可以使用定位屬性(position)來調整圖片位置,使用z-index屬性來調整圖片在容器中的層疊順序。我們還可以使用其他的CSS屬性,比如padding、margin、border等來控制圖片和容器之間的間距,讓圖片在外邊容器中居中或靠邊顯示,讓頁面更加美觀。
CSS圖片自適應外邊是非常簡單的,只需要使用“max-width: 100%; height: auto;”的樣式規則,就可以讓圖片在外邊容器中按比例自適應大小,而且不會超出容器。
img { max-width: 100%; height: auto; }
上面的代碼意思就是讓圖片最大寬度為100%,高度自動適應,這樣就可以避免出現圖片被拉伸或裁剪的情況。
這種方法可以應用于各種容器,比如
、、等。如果容器比圖片小,圖片會縮小以適應容器;如果容器比圖片大,圖片會放大以適應容器。