用html怎么修饰img

在HTML中，可以使用各种`<img>`标签属性和CSS样式来自定义图片的外观。以下是一些常见的修饰方法：

1. **src** 属性：这是必需的，指定图片的URL。

   <img src="image.jpg" alt="图片描述">

2. **alt** 属性：提供图片的文本描述，当图片无法加载或对视觉障碍用户可用时提供替代信息。

3. **width** 和 **height** 属性：设置图片的尺寸。如果设置了宽度，高度会按比例缩放；若同时设置，可能会导致失真。

   <img src="image.jpg" alt="图片描述" width="300" height="200">

4. **class** 或 **id** 属性：可以用作CSS选择器，给图片添加样式。

   <img src="image.jpg" alt="图片描述" class="custom-image">

5. **CSS样式**：

- 使用`.custom-image` 选择器改变样式，例如边框、圆角、阴影等。

   .custom-image {
       border: 1px solid #ccc; /* 添加边框 */
       border-radius: 5px; /* 设置圆角 */
       box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
   }

6. **响应式设计**：使用 `max-width: 100%` 让图片适应容器大小，避免拉伸。

   <img src="image.jpg" alt="图片描述" style="max-width: 100%; height auto;">

7. **浮动和布局**：结合其他CSS技术（如float、position、flexbox等）调整图片位置。

使用以上方法可以根据需要对图片进行多种装饰和布局。