img 元素不调整大小将内容推出卡片

Question

大家好，我正在尝试使用 img 元素制作响应式图像，但未考虑元素的高度。

我创建了这个例子：https://codepen.io/apodacaduron/pen/ExmpzrE?editors=1100

  <div class="container" draggable="true">
    <div class="image">
      <img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI" />
    </div>
    <div class="text">
      text content <br><br><br><br><br><br>
    </div>
  </div>

.container {
  background: blue;
  width: 336px;
  height: 383px;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.image {
  height: 100%;
  width: 100%;
}

.image > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.text {
  width: 100%;
  background: green;
}

我想让第三张卡片与第二张卡片完全一样，如果文本变大（绿色 div），图像会变小，但我无法使用 img 元素实现此目的。（IMG 元素不应具有固定高度！）

有人知道怎么做吗？

Answer 1

.flex {
  display: flex;
  gap: 1rem;
}

.container {
  background: blue;
  width: 336px;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.image {
  height: 100%;
  width: 100%;
}

.cheat-image {
  background: url('http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI') no-repeat center center / contain;
}

.image > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.text {
  width: 100%;
  background: green;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>


<div class="flex">
  <div class="container" draggable="true">
    <div class="image"></div>
    <div class="text">
      text content <br><br><br><br><br><br>
    </div>
  </div>

  <br />

  <div class="container" draggable="true">
    <div class="image cheat-image"></div>
    <div class="text">
      text contentIf you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice. If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.<br><br><br><br><br><br>
    If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.</div>
  </div>

  <br />

  <div class="container" draggable="true">
    <div class="image">
      <img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI" />
    </div>
    <div class="text">
      text content If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.<br><br><br><br><br><br>
    </div>
  </div>
</div>


</body>
</html>

Answer 2

我的解决方案是将 img 的容器设置为最小宽度 0 和最小高度 0

.image {
  min-height: 0;
  min-width: 0;
}

.image > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

img 元素不调整大小将内容推出卡片

img element not resizing pushing content out of card

html

css

responsive