Resmi bozmadan eşit yükseklik ve genişiğini ayarlama

Resmi bozmadan eşit yükseklik ve genişiğini ayarlama

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 🙂

 

[syntax type=”css”]

/* 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  */

[/syntax]

 

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

şimdi de html kodlarını aktaralım

 

[syntax type=”html”]

<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>

[/syntax]

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

Sonuç :

asdasdasd

 

Hakan AK

Son Yazılar