Prevent image from being used to calculate grid row height

Question

The height of the rows in my CSS grid is determined by the grid items. How can I prevent an image in the grid being used in determining the height of the rows? Instead, I want the image to shrink to fit inside the rows (their height is determined by other grid items).

I've tried adding min-height: 0 to the grid container as suggested in Why don't flex items shrink past content size? as well as max-height: 100% to the image but to no avail.

The grid without the image:

The grid with the image:

#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/

I think giving a width and height to the img tag would work. — Abhilekh Gautam, Sep 03 '20 at 14:46
@TemaniAfif, are you sure it's a duplicate? The problem the OP is describing doesn't even appear to exist. The item with the image is set to expand across multiple rows, which is what it is doing. — Michael Benjamin, Sep 04 '20 at 12:53
@MichaelBenjamin I understand from the question that the OP want to add the image without having the image increase the height of the rows. The size should be kept like the image doesn't exist (let's wait for OP to confirm if this is what he want) — Temani Afif, Sep 04 '20 at 12:59
The height of the rows will vary because there is no defined height on the container. — Michael Benjamin, Sep 04 '20 at 13:00
yes variables and the input/button are defining the height .. I suppose he don't want the image to be considered in defining the height — Temani Afif, Sep 04 '20 at 13:01
@TemaniAfif Yes that's correct (I don't want the image to be considered in defining the height). Your answer worked thanks, although I don't quite understand how it worked — The Codesee, Sep 04 '20 at 13:07
it's easy, I make the image height:0 so it doesn't affect the layout and later I force it to be min-height:100% to take the height of it's row calculated previously — Temani Afif, Sep 04 '20 at 19:28
@TemaniAfif Ah that makes sense, thanks. I wasn't aware those two rules would work together with `0` and `100%`. I've updated my question to better reflect the problem. Even though the duplicate you linked has the answer that's worked, I'm not sure the problem is the same as mine though? — The Codesee, Sep 05 '20 at 11:35
duplicate is based on the solution. Your question is different but the solution is the same as the other and trick is also the same — Temani Afif, Sep 05 '20 at 11:37

score 0 · Answer 1 · answered Sep 03 '20 at 14:53

Untill you don't define the height of the div which contains the image, the height of your image class: 100% will not change the result.

You should give a height or max height to your .hotel-editor. It works for me:

#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;

}

score 0 · Answer 2 · answered Sep 03 '20 at 14:58

An ugly workaround would be to absolute position the image.

#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;
  position: relative;
}

.hotelimage img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.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>

Prevent image from being used to calculate grid row height

2 Answers2