Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Yan Yana Responsive Resim Ekleme Nasıl Yapılır?


FacebookTwitterPinterestTumblrYazdır


Yan Yana Responsive Resim Ekleme Nasıl Yapılır?Web sitenize HTML'nin tablo etiketlerini kullanarak, responsive bir şekilde yan yana resimler eklemek isteyebilirsiniz. Normalde bildiğiniz gibi, "table" parametresi responsive değil ve bunun için de birtakım CSS kodları kullanmak gerekmektedir.

Yan Yana Responsive Resim Ekleme Nasıl Yapılır?

Aşağıdaki kodları kullanarak, Internet Explorer dahil, birçok tarayıcı ile uyumlu ve yan yana responsive resim ekleme işlemini kolaylıkla gerçekleştirebilirsiniz. Örnek bir kullanım aşağıda yer almakta olup, ilgili resim linklerini ise kendinize göre güncellemeyi lütfen unutmayınız.

AYRICA: HTML Tablo Yapısındaki Boşlukları Kaldıralım

Yan Yana Responsive Resim Ekleme Nasıl Yapılır?

1) CSS kodlarımız aşağıdaki gibi olacaktır.

img {
height: auto;
max-width: 100%;
}
.image-table {
border: 0px solid rgba(0, 0, 0, 0);
border-collapse: separate;
border-spacing: 6px;
table-layout: fixed;
text-align: center;
width: 100%;
}
.image-table img {
border: 10px solid #fff;
box-sizing: border-box;
-webkit-box-shadow: 0 0 10px #999;
box-shadow: 0 0 10px #999;
}

2) HTML kodlarımız ise aşağıdaki gibidir.

<table class="image-table">
<tbody>
<tr>
<td>
<img src="resim-linki-1" alt="Açıklama" title="Başlık">
</td>
<td>
<img src="resim-linki-2" alt="Açıklama" title="Başlık">
</td>
<td>
<img src="resim-linki-3" alt="Açıklama" title="Başlık">
</td>
</tr>
</tbody>
</table>

Not: Yukarıdaki kırmızı alanları değiştirmeyi unutmayınız.


  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık