CODEWITHSUNDEEP
htmlcssflexbox
friedi
friedi

Reputation: 4360

Image in Lightbox hangs outside of container

I build a responsive lightbox with flexbox-styling and the image in this lightbox doesnt fit in the container. (Its working fine if there is enough vertical space).

Here is a image to visualize the problem: enter image description here

Thats the HTML code:

<div id="dialog-container">
  <div id="dialog">
    <div id="dialog-content">
      <div class="image-wrapper">
        <img src="https://spotwild.org/css/images/dist/header/header-07-1600.jpg">
      </div>
      <div class="thumbs">
        Here are the thumbs
      </div>
    </div>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

#dialog-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog {
  max-width: 80%;
  max-height: 80%;
  background: white;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
}

#dialog-content {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
}

.image-wrapper {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

img {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  max-width: 100%;
  display: flex;
  flex: 0 0 auto;
}

.thumbs {
  background: #eee;
  padding: 20px;
  line-height: 25px;
  box-sizing: border-box;
}

And here is the corresponding jsfiddle: https://jsfiddle.net/ppkzt7m6/1/

Does somebody has a solution and an explanation why this happens?

Upvotes: 0

Views: 271

Answers (3)

Stickers
Stickers

Reputation: 78736

The important part is to define the height on all the parent containers for the <img> element to make the percentage heights to work properly.

And use object-fit: cover; on the <img> element. Note, the current IE11 and Edge don't support it, works fine on all other modern browsers though, see the support tables.

jsFiddle

You can also do it without flexbox, the key is to set the image caption to absolute position

jsFiddle

I suggest to use background image if you do need to support IE, example:

jsFiddle

<div class="image-wrapper" style="background: url('https://spotwild.org/css/images/dist/header/header-07-1600.jpg') center / cover;">

Upvotes: 1

iyyappan
iyyappan

Reputation: 777

USE THIS.

img {
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
}
#dialog {
    background: #ffffff none repeat scroll 0 0;
    box-sizing: border-box;
    height: 100%;
    max-height: 80%;
    max-width: 80%;
    padding: 50px;
    position: relative;
}

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

add height in #dialog 

#dialog {
    background: white none repeat scroll 0 0;
    box-sizing: border-box;
    height: 100%;
    max-height: 80%;
    max-width: 80%;
    padding: 50px;
    position: relative;
}

Upvotes: 0

Related Questions