JSFiddle - React, Tailwind, and code Playground

by bertuz

HTML

<div class="extwrap">
<div class="test">
    <img src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG"/>
</div>
</div>

CSS

.extwrap{
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 5px; border: 1px solid lightgrey;    
    width: 300px;
    height: 400px;
}

.test{
    width: 300px;
    background-color: grey;
    overflow: hidden;
    
    -moz-border-radius: 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;     
}

.test:before{
    content: "";
    display: inline-block;
    background-color: red;
    /*how much do we want to crop the image? (in this case the blue div)*/
    padding-top: 200px;
    /*the trick of putting the blue div in the middle is here*/
    vertical-align: middle;
}

.test > img{
    display: inline-block; 
/*     try to change this to 5000px and decomment the last comment below*/
    height: 500px; 
    width: 300px; 
    background-color: blue; 
    vertical-align: middle;
     /*
    HOW TO EXPLAIN THIS? WHY IS IT NEEDED?
    Tip: in case the blue div is taller than the red padding,
    then IT SETS THE HEIGHT OF THE GREY DIV.
    But if we tell it that it has big negative margin 
    (top and bottom), it will stay at its place and
    overflow:hidden crops it, cause divs with negative margin that
    go beyond the height (in this case the height set by the red
    inline-block) are cropped.
    */    
    margin: -20000em 0;
}