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

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

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

img 方式

html：

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

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: hidden; 以确保超出部分被裁剪。

.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;
}

在上面的示例中，.background-image 类指定了元素的宽度和高度，并设置了背景图片的 URL。background-size: cover 会将背景图片缩放以填充整个元素，保持宽高比例。background-position: center 则将背景图片居中显示。

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