JSFiddle - React, Tailwind, and code Playground

by mmarcon

HTML

<ul>
    <li><div>Text</div><img src="http://farm8.staticflickr.com/7185/6908744697_70e0cf1948_b_d.jpg"/></li>
    <li><div>Text</div><img src="http://farm8.staticflickr.com/7185/6908744697_70e0cf1948_t_d.jpg"/></li>
    <li><div>Text</div><img src="http://farm5.staticflickr.com/4084/5002766250_24bc21185a_b_d.jpg"/></li>
    <li><div>Text</div><img src="http://farm5.staticflickr.com/4084/5002766250_24bc21185a_m_d.jpg"/></li>
</ul>

CSS

ul {
    overflow: hidden;
}

li {
    width: 234px;
    height: 123px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
    overflow: hidden;
    position: relative;
}

img {
    display: block;
    top: 30px;
    left: 0;
    position: absolute;
}

img.tall {
    width: 234px;
}

img.wide {
    height: 123px;
}

div {
    width: 234px;
    height: 30px;
    background: #333;
    color: #fff;
}

JavaScript

$(window).load(function(){
    $('img').each(function(){
        var w = $(this).width(), h = $(this).height();
        //console.log(w, h);
        $(this).addClass(w>h?'wide':'tall');        
    });
})