0

How can I get this height constraint to work on webkit, just like FF (left)?

Left, firefox = good

Right, brave/safari = bad

Code: https://codepen.io/flapusmog/pen/RwYvzvq

.f {
  height:250px;
  width:250px;
  border:1px solid red;
}

.t {
  font-size:50px;
}

img {
  height:100%;
  width:100%;
  object-fit:contain;
  
  /* not working */
  flex-shrink:1; 
}

.flex {
  display:flex;
  flex-direction: column;
}
<div class="f flex">
  <div class="t">
    Some<br>text
  </div>
  <img src="https://picsum.photos/200/300">
</div>

enter image description here

thanks, J

joe_g
  • 685
  • 1
  • 6
  • 17

2 Answers2

1

When you give img height 100%, it means that you give it 250px. That's why there is the overflow. Can you try this code.

.f {
    height:250px;
    width:250px;
    border:1px solid red;
}

.t {
    font-size:50px;
}

img {
    display: none;
    height: 100%;
    width:100%;
    object-fit:contain;
  
    /* not working */
    flex-shrink:1; 
}

.flex {
    display:flex;
    flex-direction: column;
}

.img {
    background-image: url(https://picsum.photos/200/300);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
}
<div class="f flex">
    <div class="t">
        Some<br>text
    </div>
    <div class="img">
        <img src="https://picsum.photos/200/300">
    </div>
</div>
Mohamed Yedes
  • 291
  • 1
  • 1
  • 6
  • Thanks! I'd like the image to fill all remaining space, no matter how much space there is left. If i set 50% each, I can't get the image to fill the remaining space in height, it seems. – joe_g Mar 27 '23 at 12:55
  • I updated my previous code. Can you check it. – Mohamed Yedes Mar 27 '23 at 14:27
  • A-ha, background image, that works i guess, but its not an image anymore. A better solution i found in the mean time is to just set min-height:0 to the image. Anyway thanks for your effort. – joe_g Mar 27 '23 at 18:33
1

The answer is to add min-height:0 on the image

joe_g
  • 685
  • 1
  • 6
  • 17