Pazartesi , 24 Temmuz 2017
Anasayfa » WEB » CSS » CSS ile Esnek Resimler

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

 

Screenshot_25

 HTML kodları:

 

CSS Kodları:

 

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

 

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

1 Yorum

  1. Çok aradığım bir özellikti. Paylaşım için teşekkürler 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir