CSS圖片按照原比例顯示,是網頁設計中非常常見的需求。一般情況下,我們向網頁中加入圖片,希望圖片按照原比例顯示,不失真,同時又希望圖片大小能夠自動適應屏幕大小。
實現這個需求,我們需要用到CSS中的標簽。這個標簽可以讓我們在頁面中添加圖片,并且可以通過CSS樣式對圖片進行設置。
img { max-width:100%; height:auto; }
上面的CSS代碼可以讓圖片自適應屏幕大小,并且保持圖片的原比例。
這段代碼中的max-width設置圖片最大寬度為100%。也就是說,圖片會自適應屏幕大小,并且圖片的寬度不會超過父容器的寬度。height:auto設置圖片高度自適應。
這是一種簡單而實用的CSS圖片自適應方案,為網頁設計帶來了便利與美感。
上一篇vue抄誰的