如何給img添加CSS寬高
在HTML中，img元素用于顯示圖像，為了更好地控制圖像的顯示樣式，我們可以使用CSS來設(shè)置圖像的寬度和高度，下面是一些關(guān)于如何給img添加CSS寬高的方法。
1、內(nèi)聯(lián)樣式：在HTML元素內(nèi)部使用style屬性來添加CSS樣式。
<img src="image.jpg" style="width: 200px; height: 100px;">
這個例子中，圖像的寬度被設(shè)置為200像素，高度被設(shè)置為100像素。
2、外部樣式表：在HTML文檔的頭部使用link元素來引用一個外部CSS文件。
<head>
<link rel="stylesheet" href="styles.css">
</head>在CSS文件中添加樣式規(guī)則：
img {
width: 200px;
height: 100px;
}這個例子中，所有img元素的寬度和高度都會被設(shè)置為200像素和100像素。
3、使用百分比：除了使用像素值外，還可以使用百分比來設(shè)置寬度和高度。
img {
width: 50%;
height: 50%;
}這個例子中，所有img元素的寬度和高度都會被設(shè)置為其包含塊的50%。
如果圖像的原始寬高比與設(shè)置的寬高比不同，圖像可能會被拉伸或壓縮，為了避免這種情況，可以使用object-fit屬性來控制圖像的填充方式。
img {
width: 200px;
height: 100px;
object-fit: cover;
}這個例子中，所有img元素的寬度和高度都會被設(shè)置為200像素和100像素，并且圖像會被裁剪并填充到完全覆蓋其容器。
版權(quán)聲明：除非特別標注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時請以鏈接形式注明文章出處。
