CSS ile Esnek Resimler

Esnek tasarımlı sitelerde sabit genişlikteki resimler sitenin tasarımının üzerine çıkarak görüntüde hoş olmayan bozulmalara neden olmaktadır. Em ölçüsünü kullanarak genişliği orantılı yapmak da mümkün ancak bununda kendine göre dezavantajları var. Bu yazıda zemine resim ekleyerek sitedeki resimlerin esnek bir şekilde görüntülenmesini sağlayacağım.

DEMO

HTML kodları:


<div id="icerik">
<div id="resim">
</div>
<p>
İstanbul, Türkiye'de yer alan şehir ve ülkenin 81 ilinden biri. Ülkenin en kalabalık, ekonomik ve sosyo-kültürel açıdan en önemli şehridir.[2][3][4] Şehir, iktisadi büyüklük açısından dünyada 34., nüfus açısından belediye sınırları göz önüne alınarak yapılan sıralamaya göre Avrupa'da birinci, dünyada ise Lagos'tan sonra altıncı sırada yer almaktadır.[5][6]

İstanbul Türkiye'nin kuzeybatısında, Marmara kıyısı ve Boğaziçi boyunca, Haliç'i de çevreleyecek şekilde kurulmuştur. İstanbul kıtalararası bir şehir olup, Avrupa'daki bölümüne Avrupa Yakası veya Rumeli Yakası, Asya'daki bölümüne ise Anadolu Yakası veya Asya Yakası denir. Tarihte ilk olarak üç tarafı Marmara Denizi, Boğaziçi ve Haliç'in sardığı bir yarım ada üzerinde kurulan İstanbul'un batıdaki sınırını İstanbul Surları oluşturmaktaydı. Gelişme ve büyüme sürecinde surların her seferinde daha batıya ilerletilerek inşa edilmesiyle 4 defa genişletilen şehrin[7] 39 ilçesi vardır. Sınırları içerisinde ise büyükşehir belediyesi ile birlikte toplam 40 belediye bulunmaktadır.
</p>
</div>

</div>

<p>

İstanbul, Türkiye'de yer alan şehir ve ülkenin 81 ilinden biri. Ülkenin en kalabalık, ekonomik ve sosyo-kültürel açıdan en önemli şehridir.[2][3][4] Şehir, iktisadi büyüklük açısından dünyada 34., nüfus açısından belediye sınırları göz önüne alınarak yapılan sıralamaya göre Avrupa'da birinci, dünyada ise Lagos'tan sonra altıncı sırada yer almaktadır.[5][6]

İstanbul Türkiye'nin kuzeybatısında, Marmara kıyısı ve Boğaziçi boyunca, Haliç'i de çevreleyecek şekilde kurulmuştur. İstanbul kıtalararası bir şehir olup, Avrupa'daki bölümüne Avrupa Yakası veya Rumeli Yakası, Asya'daki bölümüne ise Anadolu Yakası veya Asya Yakası denir. Tarihte ilk olarak üç tarafı Marmara Denizi, Boğaziçi ve Haliç'in sardığı bir yarım ada üzerinde kurulan İstanbul'un batıdaki sınırını İstanbul Surları oluşturmaktaydı. Gelişme ve büyüme sürecinde surların her seferinde daha batıya ilerletilerek inşa edilmesiyle 4 defa genişletilen şehrin[7] 39 ilçesi vardır. Sınırları içerisinde ise büyükşehir belediyesi ile birlikte toplam 40 belediye bulunmaktadır.

</p>

</div>

CSS Kodları:


<style>

#icerik
{
width: 50%;
margin: auto;
padding: 1em;
background: #3498db;
color: #fff; 
}

#resim
{
height: 300px;
background: url(resim1.jpg) no-repeat center;
}

</style>

<style>

#icerik

{

width: 50%;

margin: auto;

padding: 1em;

background: #3498db;

color: #fff;

}

#resim

{

height: 300px;

background: url(resim1.jpg) no-repeat center;

}

</style>

İçerik alanının tarayıcıda esnek görünmesi için genişlik değerini %50 olarak ayarladım. İçeriğin ortalanması için margin değerini auto olarak ayarladım. İç boşluk, arkaplan, yazı rengi sizin tercihinize kalmış bir durum.

Gelelim önemli olan kısma, burada resmi göstermek için id değeri resim olan bir tane div etiketi ekledik. Bu div etiketinin yüksekliğini resmin ekranda görünmesini istediğimiz yükseklik değeri olarak ayarladık. Div etiketinin arkaplan değerine ise resmin yolunu yazıp resmi ortaladık(önemli olan kısım resmin ortalanması). Odak noktası ortada olan bir resmi ekleyerek sizde test edebilirsiniz.

Unutma:

Resmin arkaplan olarak konulacak div genişliği bulunduğu alanın genişliğinde olduğunu unutma
Resmin arkaplan olarak eklediğinde resmi ortalamayı unutma
Resmi ve yazıyı kapsayan(burada icerik ) etiketinin genişliğini orantısal yapmayı unutma

CSS ile Esnek Resimler

İlgili

Yorum

Yorum Yap X

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X