CL 图像标签宽度 - CSS

在 HTML 中，使用 <img> 标签插入图片时，可以通过 width 和 height 属性设置图片的宽度和高度。但是，更好的做法是使用 CSS 来控制图片的宽度。

CSS 控制图片宽度的方法

1. 使用 width 属性

通过 width 属性可以控制图片的宽度，如下所示：

img {
  width: 100px;
}

上述代码将所有 <img> 标签的宽度设置为 100px。如果只需要控制部分图片的宽度，可以为这些图片添加一个类名，然后通过类名来控制宽度：

.img-small {
  width: 100px;
}

<img src="image.png" alt="图片" class="img-small">

注意：如果图片的原始宽度小于设置的宽度，图片会被放大，会导致图片失真。因此建议根据图片的实际大小来设置宽度。

2. 使用 max-width 属性

通过使用 max-width 属性，可以在保持图片比例的情况下限制图片的最大宽度。如下所示：

img {
  max-width: 100%;
}

上述代码将图片的最大宽度设置为父元素的宽度。如果图片的宽度小于父元素的宽度，图片会被缩放，与设置的宽度比例相同。

注意： max-width 可以保证图片不会失真，但是如果图片比例不是与父元素相同，会导致图片不完全填充父元素。

3. 使用 object-fit 属性

如果不想让图片失真，也不想让图片留白，可以使用 object-fit 属性。如下所示：

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

上述代码将设置图片的宽度和高度，并使用 cover 属性来填充图片。其他常用的属性还有 contain 和 fill。

总结

使用 CSS 来控制图片宽度，可以保证图片不失真，也可以在不留白的情况下自适应父元素。根据实际情况选择合适的控制方法即可。