Author
Message
Kaan
678 posts |
#897 2017-01-31 14:39 GMT | |
|
Resimleri veya fotoğrafları responsive uyumlu hale getirme.
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 ekrand : tml] lt;/body><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> </html> [/highlight] İ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. [highlight=html]<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>[/highlight] 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.. [highlight=html] <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>[/highlight] Son olarak şöyle bir örnekle konumuzu bitirelim [highlight=html] <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> [/highlight]
Kişiliğim, hayatım hakkında konuşabilirsiniz. Fikir yürüte bilirsiniz. Beni öyle böyle sanabilirsiniz. Ama emin olamazsınız. Sizin hakkımdaki yorumlarınız, sanmalarınız benim gerçek de ne olduğumu değiştirmez. Baktığım yeri söyleye bilirsiniz ama ne gördüğümü ASLA...
|
