css 图片宽度百分比 高度与宽度一致

思路

通过添加一个额外的 HTML 元素作为容器，并设置它的宽度和高度为百分比值。然后将图片作为该容器的背景图像，并设置 background-size 属性为 cover。

html

<div class="image-container">
  <div class="image"></div>
</div>

css

.image-container {
  position: relative;
  width: 100%; /* 容器宽度 */
  height: 0; /* 容器高度 */
  padding-bottom: 100%; /* 这里的百分比值应与图像宽度相同 */
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
}

在上述代码中，我们使用一个额外的 div 元素作为容器，并将它的宽度和高度设置为相同的百分比值。然后，通过将图像设置为该容器的背景图像，并将 background-size 属性设置为 cover，可以实现高度和宽度一致的效果。