CSS3中,我們可以通過設(shè)置圖片的寬度和高度來(lái)防止圖片拉伸,我們可以將圖片的寬度和高度設(shè)置為原始圖片的大小,或者根據(jù)需要設(shè)置其他固定的大小。
假設(shè)我們有一張?jiān)即笮?00x300的圖片,我們可以使用以下CSS代碼來(lái)防止圖片拉伸:
img { width: 200px; height: 300px; }
這樣,無(wú)論瀏覽器窗口的大小如何變化,圖片的大小都將保持為200x300像素,從而防止圖片拉伸。
我們還可以使用CSS的max-width
和max-height
屬性來(lái)限制圖片的***大寬度和高度,這樣,即使瀏覽器窗口的大小發(fā)生變化,圖片的大小也不會(huì)超過指定的***大值,從而避免拉伸。
我們可以將圖片的***大寬度設(shè)置為500像素,***大高度設(shè)置為400像素:
img { max-width: 500px; max-height: 400px; }
這樣,無(wú)論瀏覽器窗口的大小如何變化,圖片的大小都將保持在200x300到500x400像素之間,從而防止圖片拉伸。