html - 防止图像被用于计算网格行高

Question

我的 CSS 网格中行的高度由网格项决定。如何防止在确定行高时使用网格中的图像？相反，我希望图像缩小以适合行内（它们的高度由其他网格项确定）。

我已经尝试min-height: 0按照为什么不弹性项目缩小超过内容大小？以及max-height: 100%图像，但无济于事。

没有图像的网格：

带有图像的网格：

#hotel-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.3fr 1.5fr 1fr 0.3fr;
  grid-gap: 21px;
  min-height: 0;
  min-width: 0;
}

.hotelimage {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.uploadedimg {
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
}

.hotel-info {
  display: contents;
}

<div id="hotel-editor">
  <div class="hotelimage" style="background: transparent;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" class="uploadedimg">
  </div>
  <div class="hotel-info">
    <input type="text" name="name" placeholder="Name">
    <br>
    <textarea name="description" placeholder="Description"></textarea>
  </div>
  <input type="submit" name="submit" class="submitbtn" value="Update">
</div>

JsFiddle：https ://jsfiddle.net/ntyj76he/

标签： htmlcsscss-grid

Answer 1

直到你没有定义包含图像的 div 的高度，你的图像类的高度：100% 不会改变结果。

你应该给你的 .hotel-editor 一个高度或最大高度。这个对我有用：

#hotel-editor {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 0.3fr 1.5fr 1fr 0.3fr;
grid-gap: 21px;
min-height: 0;
min-width: 0;

height:30px;
//or
max-height:30px;

}