img或background-image实现图片高度根据宽度改变而改变

本文介绍: img或background–image 实现图片高度根据宽度改变而改变。图片的高度根据宽度进行自适应。

img 和 background–image 的高度 通过 宽度自适应

图片的高度根据宽度保持一致 是需要通过 padding–top 来代替 height。
注意： p add in g–top 是通过父级的宽度保持一致，所以在使用的时候必须要套一层父级的宽度。
如果要通过标签实现将图片填充整个元素，并保持与原图的宽高缩放比例一致，并根据宽高比例裁剪图片以完全展示并居中显示，可以使用 CSS 和一些技巧来实现。
首先，确保父元素具有相对定位（position: rel a ti v e;），然后使用绝对定位（position: a bs olut e;）来定位元素，并设置其宽度和高度为100%以填充整个父元素。

img 方式

html：

&lt;div style="width: 400px;height: 600px;"&gt;
  <div class="container"&gt;
  	<img src="path/to/image.jpg" alt="Image" class="background-image"&gt;
  </div&gt;
</div&gt;

css：

.container {
  position: relative;
  width: 300px;
  padding-top: 100%; /* 用padding-top 表示 height，height 会和父级的width保持一致，也就是400px */
  overflow: hidden; /* 确保超出部分被裁剪 */
}

.background-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* 新增，确保图片填充整个容器 */
}

在上面的示例中，.container 类指定了父元素的宽度和高度，并设置了相对定位和 overflow: hi dden; 以确保超出部分被裁剪。

.background–image 类指定了元素的样式。使用绝对定位和 top: 50%; left: 50%; transform: translate(-50%, -50%); 将其居中定位在父元素中心。然后，设置其宽度和高度为100%以填充整个父元素，并使用 object-fit: cover; 确保图片按比例缩放以填充整个容器。

这样设置后，无论图片的宽高比例如何，图片都会被缩放并填充整个容器，并且保持居中显示。如果图片的宽度大于高度，则会裁剪部分高度以确保高度完全展示；如果图片的高度大于宽度，则会裁剪部分宽度以确保宽度完全展示。

background–image 方式

html：

<div style="width: 400px;height: 600px;">
  <div class="background-image"></div>
</div>

css：

.background-image {
  width: 300px;
  padding-top: 100%;
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
}