0

I want that the image height fits to the parent div's height, but the image is overflowing. How can I resolve this?

.image-parent{
    max-height: 50%;
}
img{
    height: 100%;
}
<div class="image-parent">
     <img src="example.jpg" alt="">
</div>
venndi
  • 161
  • 9
  • You may find [this question](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) helpful too. – Lae Apr 23 '21 at 08:55
  • For seeing the issue at first glance i added an image that works in this stack snippet, made the background of the parent grey and wrapped all in a container with a defined height in ```px``` so that the img-parents height in ```%``` has an effect. – biberman Apr 23 '21 at 09:30
  • So here is the example what I want. https://worldwide.kia.com/eu/at/de/ev6/reserve look the"vehicle__image" class. That is the parent div. – venndi Apr 23 '21 at 09:33

4 Answers4

1

You just have to set a height (without max) and the image fits automatically.

Working example (i added your old example for comarison):

.container{ 
    height: 400px;
}
.image-parent{
    height: 50%;
    background-color: grey;
}
.old-image-parent{
    max-height: 50%;
    background-color: #bbb;
}
img{
    height: 100%;
}
<div class="container">
     <div class="image-parent">
          <img src="https://picsum.photos/300" alt="">
     </div>
     <div class="old-image-parent">
          <img src="https://picsum.photos/300" alt="">
     </div>
</div>
biberman
  • 5,606
  • 4
  • 11
  • 35
  • What if the parent's height is instead defined by a flex box that's intended to fill the remainder of the page height? – Reahreic Jul 20 '22 at 14:25
1

Mention the height for body and set max-height of the image to 100%

html,
body {
  height: 100%;
}

.image-parent {
  height: 50%;
  background-color: grey;
}

img {
  max-height: 100%;
}
<div class="image-parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" alt="">
</div>
biberman
  • 5,606
  • 4
  • 11
  • 35
Rohit Vishwakarma
  • 179
  • 6
0

It is necessary to set overflow: hidden for container to prevent oveflowing:

.image-parent {
  max-height: 50%;
  overflow: hidden;
  height: 100px;
}

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

An example:

.image-parent {
    max-height: 50%;
    overflow: hidden;
    height: 100px;
}

img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: contain
}
<div class="image-parent">
     <img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="an image">
</div>
StepUp
  • 36,391
  • 15
  • 88
  • 148
  • This just hide the overflowing image, I want that the image fits to parents height. – venndi Apr 23 '21 at 08:48
  • @venndi please, see my updated answer – StepUp Apr 23 '21 at 08:54
  • with that solution the width fits to the parent element, but not the height. So the image is cut off. – venndi Apr 23 '21 at 09:01
  • So here is the example what I want. https://worldwide.kia.com/eu/at/de/ev6/reserve/ look the"vehicle__image" class. That is the parent div. – venndi Apr 23 '21 at 09:18
  • @venndi please, see my updated answer – StepUp Apr 23 '21 at 11:20
  • ```overflow: hidden``` is not necessary here. Just open the browser console and deactivate it - there is no difference. Also ```object-fit: contain``` only centers the image (when used with ```width```) but has no effect for the overflow since the fixed ```height: 100px``` managed it... – biberman Apr 24 '21 at 09:34
0

Try this :

.image-parent{
    max-height: 50%;
}
.image-parent img{
        object-fit:contain;
        height:100%;
}
Mahmoud Abbas
  • 24
  • 5