时间戳

首页 > 解决方案 > 以最大高度显示图像而不进行裁剪或拉伸等

html - 以最大高度显示图像而不进行裁剪或拉伸等

问题描述

我有一个图像（我不知道它的宽度/高度——>从数据库加载），它应该延伸到整个容器宽度（见圆角）。我很好地解决了这个问题。但特别是对于肖像图像，它们有时会变得太大，因此我想应用最大高度。我怎样才能做到这一点？

当前代码没有最大高度（否则效果很好）

.avatar-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.avatar-thumb-square2 {
  overflow: hidden;
  position: relative;
}

.avatar-thumb-square2 .avatar-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
<div class="avatar-box" data-controller="responsive-image">
  <div class="avatar-thumb-square2">
    <img class="avatar-image" src="https://www.alten.com/wp-content/uploads/2021/05/satellite-donnees-oceanographiques.jpg">
  </div>
</div>

这会导致这样的结果： 在此处输入图像描述

但是正如你所看到的，图像在垂直方向上太大了，因此我想应用一个最大高度。例如，如何将图像大小限制为最大 400 像素。只需应用最大高度，图像就会被裁剪。见样品

在此处输入图像描述

那么我怎样才能显示完整的图像（如果它没有拉伸 100% 则居中）并保持圆角？我可以使用 JavaScript。

标签： htmlcss

解决方案

.avatar-thumb-square2 .avatar-image {
    width: 100%;
    object-fit: cover;
    height: 300px;
    border-radius: 10px;
}

.avatar-thumb-square2{
    width:30%;
}
<div class="avatar-box" data-controller="responsive-image">
  <div class="avatar-thumb-square2" data-responsive-image-target="wrapper">
    <img class="avatar-image" src="https://www.alten.com/wp-content/uploads/2021/05/satellite-donnees-oceanographiques.jpg">
  </div>
</div>

推荐阅读