Merhaba arkadaşalar,

Facebook’da da gördüğünüz gibi galeri sayfasında resim dik te olsa yatayda olsa çerçeveye eşit oranda sığdırıyor ve güzel bir görüntü ortaya çıkıyor.

Peki bunu nasıl yapabiliriz? Tabiki CSS le 

/* resimleri bir div in arka planı olarak işleyeceğiz. onun için class tanımlayalım.  */

.esitle{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
/* opsiyonel ayarlar */
width: 100px;
height: 100px;
margin:3px;
border:1px solid #ccc;
 

/* bitti  */

yukarıdaki kodu ister css dosyanıza isterseniz head  /head  blokları arasına yerleştirmeniz yeterli.

şimdi de html kodlarını aktaralım

<div class="esitle" style="background-image:url('https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/1898140_711973565524702_6697932625690223723_n.jpg?oh=a3813528ff6c251ee1db471e3ba70cb1&oe=54B8F01E&__gda__=1422164357_c0a8ffdb005cdae559eff774aab04110');"></div>
<div class="esitle" style="background-image:url('http://www.kazanmakisteyenler.com/wp-content/uploads/2010/01/Amasya-doga-manzarasi.jpg');"></div>
<div class="esitle" style="background-image:url('http://static.visplash.com/i/doga-117539.jpg');"></div>

Evvet işte bu kadar. sadece bir sınıf tanımlamayla işi bitirdik.