CSS圖片根據高度進行設置是一個非常有用和實用的技巧。通過這種技巧,我們可以很方便的讓圖片根據所在容器的高度自動調整大小,使得頁面更加美觀。
.container { height: 200px; width: 200px; } .container img { height: 100%; }
以上CSS代碼可以讓圖片根據所在的容器大小來自動調整大小。在這里,通過設置容器的高度和寬度,我們可以限制圖片的大小范圍。接著,對標簽進行設置,讓其高度等于所在容器的高度,這樣就可以讓圖片自動適應容器大小。
除此之外,CSS圖片根據高度也可以用來做圖片的自適應。比如,如果我們希望一個圖片可以根據瀏覽器窗口大小進行自動調整,就可以使用如下代碼:
img { max-height: 100%; max-width: 100%; }
通過設置圖片的最大高度和最大寬度為100%,我們可以讓圖片自動調整大小,以適應瀏覽器窗口的大小。同時,圖片的長寬比例也會得到保留,不會出現縮放變形情況。
上一篇mysql的一些基本指令
下一篇css 圖片橫向對其