0
Kayıt Ol

HTML ile yanyana resim ekleme

1

●

2.059

  • 10-12-2017, 12:09:27
    #1
    Whoy
    Whoy
    Kimlik doğrulama veya yönetimden onay bekliyor.
    Merhaba arkadaşlar hmtl ile yanyana resim eklemek istiyorum. Aynı boyutlarda ekliyorum sorun yok fakat ben büyüklü küçüklü yapmak istiyorum örnek resim aşağıdaki gibi bunlara linkte ekleyeceğim yardım ederseniz çok mutlu olurum.
  • 11-12-2017, 12:19:58
    #2
    Hunper
    Hunper
    Whoy adlı üyeden alıntı: mesajı görüntüle
    Merhaba arkadaşlar hmtl ile yanyana resim eklemek istiyorum. Aynı boyutlarda ekliyorum sorun yok fakat ben büyüklü küçüklü yapmak istiyorum örnek resim aşağıdaki gibi bunlara linkte ekleyeceğim yardım ederseniz çok mutlu olurum.
    Örnek olması açısında bir yapı oluşturdum, sayfanızın container değerine bağlı olarak resimlerin boyutlarını düzenlemeniz gerekir, resimleri innercss kullanarak eklerseniz style="background-image: url()" şeklinde, css bölümünde background-size:cover yaparak tüm boyutlarda kırpılarak gösterebilirsiniz daha sağlıklı olur. Img dediğiniz için img olarak yaptım.

      <!doctype html>
<html lang="tr">
<head>
    <title>LOREM İPSUM</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        .spe-container {
            width:90%;
            margin:0 auto;
        }
        .spe-list {
            margin:0;
            padding:0;
            display:block;
        }
        .spe-list li {
            list-style:none;
            display:block;
        }
        .spe-list li:nth-child(1) {
            float:left;
            width:50%;
        }
        .spe-list li:nth-child(2) {
            float:right;
            width:48%;
        }
        .spe-list li:nth-child(3) {
            float:right;
            width:48%;
            margin-top:34px;
        }
        .spe-list li:nth-child(1) img {
            width:100%;
            height:600px;
        }
        .spe-list li:nth-child(2) img {
            width:100%;
            height:280px;
        }
        .spe-list li:nth-child(3) img {
            width:100%;
            height:280px;
        }
    </style>
    
</head>
<body>
  <div class="spe-container">
    <ul class="spe-list">
        <li>
            <a href="" title="">
                <img src="https://wallpapercave.com/wp/doAHAI6.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="" title="">
                <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/flgzdozme4kkevx3baby.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="" title="">
                <img src="http://hdfreewallpaper.net/wp-content/uploads/2017/10/Night-star-Wallpaper.jpg" alt="" />
            </a>
        </li>
    </ul>
    <div class="cle"></div>
</div>
    
    
    
  </body>
</html>