Resizable images that fit container

responsiveness of images because they fit the 100% of the parent div. Works similarly with background "contain" css property but allows for shadows. Drawback of current implementation is that the height of the parent element must be defined in px. max-height does not work with percentage when tested on chrome and firefox.

by George Pligoropoulos

HTML

<div class="container">
    <p>DO NOT FORGET TO RESIZE PANEL TO SEE RESPONSIVENESS OF IMAGE SIZES</p>
    
    <p>large ratio 1:1</p>
    <div class ="photo">
        <img src="http://lorempixel.com/300/300"/>
    </div>

    <hr/>
    <hr/>
    
    <p>large ratio larger:smaller</p>
    <div class ="photo">
        <img src="http://lorempixel.com/600/300"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>large ratio smaller:larger</p>
    <div class ="photo">
        <img src="http://lorempixel.com/300/600"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>medium ratio 1:1</p>
    <div class ="photo">
        <img src="http://lorempixel.com/100/100"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>medium ratio larger:smaller</p>
    <div class ="photo">
        <img src="http://lorempixel.com/120/80"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>medium ratio smaller:larger</p>
    <div class ="photo">
        <img src="http://lorempixel.com/80/120"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>small ratio smaller:larger</p>
    <div class ="photo">
        <img src="http://lorempixel.com/60/60"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>small ratio smaller:larger</p>
    <div class ="photo">
        <img src="http://lorempixel.com/70/30"/>
    </div>
    
    <hr/>
    <hr/>
    
    <p>small ratio smaller:larger</p>
    <div class ="photo">
        <img src="http://lorempixel.com/30/70"/>
    </div>
</div>

CSS

.photo {
    max-width: 150px;
    min-width: 75px;
    
    max-height: 150px;
    min-height: 75px;
    
    /*
    * background image solution is not appropriate with shadow
    
    .subject_photo_image {
    height: 100%;
    
    this can be dynamic with style in html element:
    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    overflow: hidden;
    
    img {
    width: 100%;
    visibility: hidden;
}
}
    
    implementation would go like that:
    <div class="subject_photo_image" style="background: url("http://placekitten.com/g/200/500");">
    <img src="http://bit.ly/1cDbWmj"/> <!-- this is a large image to expand the container -->
    </div>
    */
}

.photo > img {
    max-width: 100%;
    max-height: 150px;
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
    -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
    box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}