Resimleri veya fotoğrafları responsive uyumlu hale getirme. | Web bulutu

Resimleri veya fotoğrafları responsive uyumlu hale getirme.

fotograflari-responsive-yapmak

Bu yazımda sizlere web sitenizde kullandığınız  fotoğrafları responsive hale getirmek için bir kaç önemli detay sunacağım.

İlk olarak dikkat etmemiz gereken detay; Resimlerin boyutlandırılması yapılırken, px cinsinden ölçü vermek yerine % değer üzerinden boyutlandırma yapacağız.


 

Aşağıda paylaştığım kodlarda dikkat edersiniz, fotoğrafın width ve height değerleri 100% üzerinden verilerek resim tam ekranda responsive olarak yerleştirilmiş.

<html>
<head>
<meta charset="utf-8">
<title>Tam ekran responsive  image</title>
</head>
<body>
 
<img src="sosyal-medya.jpg" width="100%" height="100%" />
 
</body>
</html>

Örnek için tıkla.  -Ekranı küçülterek test edin.

İpucu: Width ve height  değerleri 100% olarak verilmiş bir fotoğrafı veya öğeleri,  500*500  px değerinde  bir divin içine  alırsanız, divin tamamını kapsar ve onun boyutlarına   uyum sağlar.


Bir diğer göreceğimiz  örnek ise, fotoğraf istediğimiz boyutta  olacak ama  ekrana  göre de uyum sağlayacak. Burada  ihtiyacımız  olan css özellikleri,  max-width  ve  max-height   olacaktır. Adındanda  anlaşılacağı üzere uzunluk ölçülerine maximum değer  ekleyeceğiz  ve  verdiğimiz 100%  ölçülere  bir kısıtlama  getireceğiz.

 

Aşağıdaki örnekte,   max-height:600px;  max-width:500px;  vererek fotoğrafımıza maximum ölçü kısıtlaması getirdik ama kendi ölçü birimi  100%  üzerinden  verildiği için,  ekran genişliği 500px’in  altına  düştüğü zaman,  100% değer devreye girerek  ekrana  uyumlu bir boyutlandırmaya  sağlanacak.

<html>
<head>
<meta charset="utf-8">
<title>Sınırlandırılmış  ölçülerle çalışmak</title>
<style type="text/css">
.responsive-img {
	max-height:600px;
	max-width:500px;
	}
</style>
</head>
<body>
 
<img class="responsive-img" src="sosyal-medya.jpg" width="100%" height="100%" />
 
</body>
</html>

 

Örnek için tıkla  -Ekranı küçülterek test edin.


 

Yanlış kullanımı;

Benim vermiş olduğum örneklerde  fark ettiyseniz  fotoğrafın  width  ve height değerlerini, img  etiketinin içine yazdım ve maximum  ölçülerini  css ile  hallettim. Bunun sebebine  gelirsek, img etiketlerinde  uzunluk birimlerinin  yer alması  seo açısından  önemli bir konudur. Tarayıcı css  kodlarını  okuyup ona  göre  davranırken, arama motorlarının botları img etiketlerindeki boyutlandırma ölçülerini göremiyor ve  web sitemiz açısından  ufak da  olsa  puan kaybı ile sonuçlanıyor. Wmaracı gibi sitelerde  seo puanı ölçümü yaptığınızda ” web sitenizde  uzunluk değeri belirtilmemiş fotoğraflar var”  uyarısı  aldığınızı  çok net göreceksiniz.

Alttaki örnekte  seo açısından yanlış kullanımı görüyorsunuz..

<html>
<head>
<meta charset="utf-8">
<title>Sınırlandırılmış  ölçülerle çalışmak</title>
<style type="text/css">
.responsive-img {
        width:100%;
        height:100%;
	max-height:600px;
	max-width:500px;
	}
</style>
</head>
<body>
 
<img class="responsive-img" src="sosyal-medya.jpg" />
 
</body>
</html>

Son olarak  şöyle bir örnekle  konumuzu bitirelim 🙂

<html>
<head>
<meta charset="utf-8">
<title>Örnek kullanım ve ders sonu</title>
<style type="text/css">
.container {
	width:100%;
	max-width:1024px;
	height:auto;
	min-height:50px;
	margin:auto;
	margin-top:100px;
	}
.d1, .d2, .d3 {
	width:31%;
	height:200px;
	float:left;
	margin-left:1%;
	margin-top:1%;
	border:1px solid #666;
	}
.responsive-img {
	max-height:200px;
	max-width:500px;
	}
</style>
</head>
<body>
<div class="container">
    <div class="d1">
        <img class="responsive-img" src="03-seo-nedir.jpg" width="100%" height="100%">
    </div>
    <div class="d2">
        <img class="responsive-img" src="20.png" width="100%" height="100%">
    </div>
    <div class="d3">
        <img class="responsive-img" src="sosyal-medya.jpg" width="100%" height="100%">
    </div>
</div><!--kapsayıcı-->
</body>
</html>

Örnek için tıkla  -Ekranı küçülterek test edin.

 

Seo açısından önemli olan  ” image  optimizasyonu”  konusunu da  okudunuz mu?

 

Bir başka  blog yazımda  görüşmek üzere 🙂

 

Web Bulutu.

Bir önceki yazımız olan Css3 animasyon yapımı / Animation Css başlıklı makalemizde animasyon css3, animation css ve animations css3 hakkında bilgiler verilmektedir.

6 Comments

  1. merhaba mobil uyumlu wordpress sitemde 468×60 banner yarım görünüyor telefondan girdiğimde bu sorunu nasıl hallederim

  2. Süper bir makale olmuş. Çoğu webmaster responsive tasarım yapmak için bootstrap gibi hazır kütüphaneleri kullanıyor olabilir ama bazı durumlarda manuel yöntemler çok etkilidir. En azından işin mantığını anlamak isteyenler için ilaç niteliğinde bir makale olmuş. Örnekli uygulamalarda daha da öğretici bir hal vermiş.

Bir cevap yazın

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