Image gallery

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<p>
  <b>Image container width: <span class="cWidth"></span></b>
</p>
<div id="gallery-list-ui">
        <ul class="list">
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/4/3949/14961944074_04c6d4567e_b.jpg" alt="">
                </div>
            </li>
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/4/3938/15579928601_0cd9c4a066_c.jpg" alt="">
                </div>
            </li>
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/6/5603/15582621625_8d38986853_c.jpg" alt="">
                </div>
            </li>
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/6/5604/14962462233_beb6b3643f_b.jpg" alt="">
                </div>
            </li>
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/4/3938/15579928601_0cd9c4a066_c.jpg" alt="">
                </div>
            </li>
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/4/3934/15583508482_84c3f876e4_b.jpg" alt="">
                </div>
            </li>
            <li class="img-item left">
                <div class="img-container">
                    <img src="https://c2.staticflickr.com/4/3946/15558948826_13cb6168fc_b.jpg" alt="">
                </div>
            </li>


        </ul>

    </div>

CSS

/* General styles */
.left { float: left; }
img { display: block; }

/* Gallery list */
#gallery-list-ui{
    padding: 10px 20px;
    background-color: #fff;
    display: inline-block;
    width: 100%;
}

#gallery-list-ui li {
    height: 200px;
    width: 200px;
    overflow: hidden;
    margin: 10px;
}

JavaScript

var StentGallery = {
    gallery: null,

    init : function(){
            this.gallery = jQuery('#gallery-list-ui');
            this.resizeImage();
        }
    },

    resizeImage: function(){
        // A container is square, so height and width is the same
        var containerSize = this.gallery.find('li').first().width();

        this.gallery.find('li').each(function( index, item){
            var $img        = jQuery(item).find('img');
            var portrait    = ($img.height() > $img.width() ? true : false);

            if(portrait){
                $img.css({'width' :'100%', 'height' : 'auto'})

            } else {
                $img.css({'height' :'100%', 'width' : 'auto'})
            }
        });
        
    }
};



jQuery(document).ready(function($) {
    var gallery = StentGallery.init();
});