HTML 图片保持纵横比

在 HTML 中，我们可以使用 img 标签来插入图片。但是有时候图片太大或太小，我们需要控制图片的大小。在控制图片大小时，我们需要保持图片的纵横比，否则图片会变形。

常见方式

通过 CSS 控制图片大小

我们可以通过 CSS width 和 height 属性来控制图片的大小。但是，如果同时设置宽度和高度，则可能会导致图片变形。

<img src="image.jpg" alt="Image" style="width: 500px; height: 300px;">

通过 HTML width 和 height 属性控制图片大小

我们也可以通过 HTML width 和 height 属性来控制图片大小。同样需要注意保持纵横比。

<img src="image.jpg" alt="Image" width="500" height="300">

通过 CSS 控制最大宽度和最大高度

我们可以通过 CSS max-width 和 max-height 属性来控制图片的最大宽度和最大高度，并让图片自适应大小。

<img src="image.jpg" alt="Image" style="max-width: 100%; max-height: 100%;">

推荐方式

通过 CSS 控制宽度，并自适应高度

推荐的方式是通过 CSS 只设置宽度，并让高度自适应以保持纵横比。

<img src="image.jpg" alt="Image" style="width: 500px; height: auto;">

或者使用 CSS 类来控制图片大小。

<img src="image.jpg" alt="Image" class="img-responsive">

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

总结

以上介绍了几种控制图片大小的方法，并推荐了通过 CSS 控制宽度来保持纵横比的方式。在使用图片时，务必注意保持纵横比，避免图片变形。