0

Edit: Let me clarify! I'm not asking about how to keep the content from flowing out by restricting the size of the container, what I'm looking for is how to properly adjust the size of the content based on the container and why a div with a background image set to cover works, while and img element does not.

I am trying to achieve a standard grid layout with a header, sidebar, content and footer, where the content element would have only a single image as a child, that should fill the entire remaining space. I thought that applying

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

would be enough to get the desired result, but it unexpectedly increased the height of the content element. What's even more absurd is that no matter how much I reduce the height of the image, as long as it is measured in percentages, the height of the container keeps depending on the width of the image. See the following pen (or look at the snippets below, but the issue is more apparent in the pen, since there the boxes are visible side-by-side) for example.
https://codepen.io/Isti115/pen/vYGRNpg
Try adjusting the .a img { widht: 100%; } and see how it affects the overall height.

.container {
  display: inline-grid;
  
  width: 400px;
  height: 300px;
  
  margin: 50px;
  
  grid-template-rows: 75px 1fr 50px;
/*   grid-template-rows: 75px minmax(0, 1fr) 50px; */
  grid-template-columns: 100px 1fr;
  
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header {
  grid-area: header;
  background-color: red;
}

.sidebar {
  grid-area: sidebar;
  background-color: yellow;
}

.content {
  grid-area: content;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
}

.a .content {
/*   min-height: 0; */
}

.a img {
  width: 100%;
  height: 20%;
/*   object-fit: cover; */
/*   height: 100%; */
}

.b img {
  width: 100%;
  height: 50px;
/*   object-fit: cover; */
}

.c .placeholder {
  width: 100%;
  height: 100%;
  
/*   background-color: purple; */
  background: url("http://lorempixel.com/200/150/cats");
  background-size: cover;
}
<div class="container a">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <img src="http://lorempixel.com/200/150/cats">
  </div>
  <div class="footer"></div>
</div>

<div class="container b">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <img src="http://lorempixel.com/200/150/cats">
  </div>
  <div class="footer"></div>
</div>

<div class="container c">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <div class="placeholder"></div>
  </div>
  <div class="footer"></div>
</div>

I have since found a solution by either adding min-height: 0 or using minmax(0, 1fr), but I don't consider those ideal solutions, since I don't see why I couldn't simply take the remaining space that gets assigned to the content div element and place an image inside it that fills it completely without expanding the containers size. For example using a simple div instead of the image and giving it a background works perfectly as intended.

ps.: I know that this might sound similar to some other questions that got answered with max-height: 100%, but I think that there is a more complicated underlying issue that I would like to explore.

Isti115
  • 2,418
  • 3
  • 29
  • 35
  • Thanks for the quick reply, but no, because why would the 3rd example with the `div` work then? The element in the grid does have a height that can be used for calculations of it's children. Also, still, why does the image width affect the container height? – Isti115 Sep 09 '20 at 17:26
  • When using the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property, it defines how an element responds to the height and width of its content box! – Tanner Dolby Sep 09 '20 at 17:28
  • Yes, `object-fit` is not the main subject of this question, the issue occurs the same without it. Please check the linked codepen! – Isti115 Sep 09 '20 at 17:30
  • 1
    Any code that is relevant to the question must be included directly in the question itself, so if you need help with more than the code here then please edit your question to add it. External links are fine, but only in addition to the code included here, as they can break or change over time and make the question invalid and unhelpful to future users. – FluffyKitten Sep 09 '20 at 17:31
  • Thanks for reminding me of this, I edited the question to include the code from the pen! :) – Isti115 Sep 09 '20 at 17:37
  • *I have since found a solution by either adding min-height: 0 or using minmax(0, 1fr), but I don't consider those ideal solutions* --> why? this is actually what you need and it's a CSS grid well know feature: https://stackoverflow.com/q/43311943/8620333 / https://stackoverflow.com/q/52861086/8620333 – Temani Afif Sep 09 '20 at 22:15
  • Because I don't want to keep the grid from resizing, I just want to tell the image to fill the available space exactly. I have since solved it by setting the image to `position: absolute` in which case `width: 100%; height: 100%; object-fit: cover` computes properly, but now I cannot even answer, since the question is closed... – Isti115 Sep 13 '20 at 20:56

0 Answers0