0

I have block for images carousel, for example. I know nothing about picture sizes. I want to vertically and horizontally align images to center. One special thing is that i need wrapper above image, so i can set little plates with username. So i use max-width:100% and max-height:100% for center and middle aligning like this

How to vertically align an image inside div

So i have this code

.container{
   position: relative;
   width: 100px;
   height: 100px;
   border: 1px solid;}
   
.frame-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;}
  
.frame {
    /* equals max image height */
    position:relative;
    display: inline-block;
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    box-sizing: border-box;
    vertical-align: middle;}
    
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;}

img {
    vertical-align: bottom;
    max-width: 100%;
    max-height: 100%;}
<div class="container">

<div class="frame-wrapper">
<span class="helper"></span>
  <div class="frame">
    <span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
    </div>  
</div>

</div>

Problem appears when the image have height is bigger than container. When it happens picture oversize the wrapper and for fixing it I set height:100% to wrapper and picture fits inside it. What I am asking about here is that in FF browser when I set height: 100% to wrapper image is scales, but wrapper doesn't follow it and still have original width.

So you can open this in any browser instead Firefox and look how it must work

JS Fiddle if you want http://jsfiddle.net/crazyboris/pd3v2kp8/1/

Do you have any ideas why is this happening?

Community
  • 1
  • 1
CrazyBoris
  • 3
  • 1

1 Answers1

0

It's because your .frame-wrapper doesn't have height and width specified being an absolute positioned container. Add:

height: 100%;
width: 100%;
Adrianopolis
  • 1,272
  • 1
  • 11
  • 15