css 图片宽度随高度自适应

CSS中图片宽度可以通过设置具体的像素值或百分比来进行调整，但是如果要实现图片宽度随高度自适应，就需要使用一个新的CSS属性——object-fit。

img {
  width: 100%; /* 设置宽度为100% */
  height: 200px; /* 设置固定高度 */
  object-fit: cover; /* 设置填充方式为覆盖 */
}

上述代码中，width被设置为100%，表示图片宽度占据其父元素的100%。同时，为了保证高度的自适应，我们还需要给图片设置一个固定的高度。接下来是关键的一步，我们使用object-fit属性，将图片的填充方式设置为cover。这样做后，图片将会按比例缩放并覆盖整个容器，并保证宽度和高度的比例不会改变。

除了cover，object-fit属性还有其他几种值：

• fill：按比例缩放图片，使其充满容器，但不保持宽高比例
• contain：按比例缩放图片，使其可以完整地显示在容器内，但不一定填满容器
• none：不对图片进行缩放或裁剪，使用原始图片大小
• scale-down：当原始图片大小小于容器大小时，等同于none。否则等同于contain

通过使用object-fit属性，我们可以轻松地实现图片宽度随高度自适应的效果，同时保持良好的视觉效果。