CODEWITHSUNDEEP
htmlcss
Shotiko Topchishvili
Shotiko Topchishvili

Reputation: 2943

min-width works but min-height doesn't

I have react-image-slideshow slider in my web app. I'm trying to cover parent div with image but i certain situations, there is a little space left. P.S I use react-image-gallery

Rendered HTML:

.image-gallery-slide div{
  height: 200px;
}

.image-gallery-image{
  position: relative;
  object-fit: cover;
  top: 50%;
  transform: translateY(-50%);
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
}
<div tabindex="-1" class="image-gallery-slide  center" role="button" style="transform: translate3d(0%, 0px, 0px);">
   <div>
      <img class="image-gallery-image" src="https://picsum.photos/id/1018/1000/600/">
   </div>
</div>

Screenshot

I want that image to cover parent div

Upvotes: 1

Views: 362

Answers (2)

lzbernardo
lzbernardo

Reputation: 196

Height works a little bit differently than width in css. While percentage values for width will always grab the inherited width from the element's parent, that only works for the root element html when we're talking about height.

That means the parent div must have a defined numerical height, or be html itself. (That's why your isolated code snippet works, as stated in the comments, by the way)

One solution would be to use the vh (viewport height) unit and set min-height: 100vh. That's not supported by all browsers, though.

Other solution would be to set the parent's height, as stated before.

I'm pretty sure there are even more approaches.

Upvotes: 1

Abuzar warraich
Abuzar warraich

Reputation: 42

Use the px unit and set min-height:200px

Upvotes: 0

Related Questions