Yazılım Örnekleri

Bu örneğimizde responsive divlerimizin içine resim ortalamayı göstereceğim. 

Bildiğiniz kimi bazı resimler enine, bazı resimler de boyuna uzun oluyor. Bu tür resimleri galerilerde veya logo olarak sitelerimize eklediğimizde altta üstte veya sağda boşluk kalıyor yada üste veya sola yapışık oluyor. Buda çok kötü bir görüntü oluşturuyor. Bu tür resimleri responsive divlerde ortalayabileceğimiz bir örnek yapalım.

<style>
.resim{
     width:31% !important;
     height:185px !important; 
    overflow:hidden; 
    display:table-cell;
    overflow:hidden;
    text-align:center;
    vertical-align:middle; 
    margin:0 auto;
    border:1px solid #333; }    
.resim img{
    max-width:250px !important;
    max-height:165px !important;
    height:auto;
    vertical-align:baseline;
    border:3px solid #f2f2f2;
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>

<div class="resim"><img src="../resim/5.png"></div>
<div class="resim"><img src="../resim/6.jpg"></div>
<div class="resim"><img src="../resim/7.jpg"></div>