调整高度时图像被截断

Question

当我改变页面的高度时，图像开始被截断。我附上了一张图片。这是我用于显示图片的组件的代码。当顺风改变高度时，如何使其响应收缩

<div class="flex items-center justify-center min-h-screen py-48">
  <div class="flex flex-col">
    <div class="flex flex-wrap">
      <div class="w-full px-4">
        <div className="textColorHead banner header2">
          <div className="banner-text">
            <h1 className="responsive-headline">hi</h1>
          </div>
        </div>
        <div class="flex  flex-col w-50 ">
          <a href="#">
            <img class="flex-col rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 flex-shrink-1" src="images/img.jpg" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

image cut off

Answer 1

如果你想完全显示图像，你应该在你的 img 对象中useobject-fit: contain;，如果你想覆盖每个屏幕尺寸的空白区域，你应该object-fit: cover;。示例：

div {
  max-width: 800px;
}

img {
  object-fit: contain;
  width: 100%;
}

<div>
  <h2>This image is 1920x1080 pixels in a 800px box.</h2>
  <img src="https://via.placeholder.com/1920x1080">
</div>