CSS中設(shè)置圖片高寬的代碼非常簡單,只需要使用width和height屬性即可。
img { width: 200px; height: 150px; }
在上面的代碼中,我們設(shè)置了圖片寬度為200像素,高度為150像素。如果要保持圖片比例不變,可以只設(shè)置其中一個(gè)屬性。
img { width: 300px; height: auto; }
上面的代碼中,我們設(shè)置了圖片寬度為300像素,高度自適應(yīng)。
如果想要將圖片調(diào)整為父元素的寬度,可以使用max-width屬性。
img { max-width: 100%; height: auto; }
上述代碼中,我們使用了max-width屬性將圖片調(diào)整為父元素的寬度,并且高度自適應(yīng)。
除此之外,我們也可以使用object-fit屬性來控制圖片的展示方式。object-fit可選的屬性值有fill、contain、cover、none和scale-down。
img { width: 200px; height: 150px; object-fit: cover; }
在上述代碼中,我們使用了object-fit: cover;屬性將圖片鋪滿整個(gè)容器,并裁切掉多余部分。
總的來說,設(shè)置圖片高寬的代碼非常簡單,我們可以結(jié)合自己的需要來靈活運(yùn)用各種屬性,打造出獨(dú)特的設(shè)計(jì)效果。