• 05-06-2020, 13:15:48
    #1
    Şu orta kısmı tam olarak oturtamadım. Düzeltme yapabilecek olan var mı kod

    <div class="container">
    <div class="row">
    <div style="margin-top: 30px;">
    
    
    
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a title="1080p Gece Görüşlü Kamera" href="https://market.miuiturkiye.net/ev-ofis-guvenlik-kameralari/xiaomi-yi-home-2-1080P-gece-goruslu-smart-%C4%B1p-kamera">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-a.jpg" style="width: 100%;margin-bottom: 10px;" class="img-responsive" alt="1080p Gece Görüşlü Kamera">
    </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="padding:0px">
    <div class="short-div">
    <a title="Xiaomi Scooter" href="https://market.miuiturkiye.net/xiaomi-mijia-m365-pro-electric-scooter-elektrikli-scooter">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-b.jpg" style="width: 100%; margin-bottom: 10px;" class="img-responsive" alt="Xiaomi Scooter">
    </a>
    </div>
    <div class="short-div">
    <a title="Xiaomi Verge Lite" href="https://market.miuiturkiye.net/xiaomi-amazfit-verge-lite">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-c.jpg" style="width: 100%; margin-bottom: 10px;" class="img-responsive" alt="Xiaomi Verge Lite">
    </a>
    </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <a title="Xiaomi TWS Airdots Earphones Lite " href="https://market.miuiturkiye.net/xiaomi-tws-airdots-earphones-lite-bluetooth-kulaklik-beyaz">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-d.jpg" style="width: 100%;margin-bottom: 10px;" class="img-responsive" alt="Xiaomi TWS Airdots Earphones Lite ">
    </a></div>
    
    </div>
    </div>
    </div>
    Ön izleme http://jsfiddle.net/56b9tva0/1/
  • 05-06-2020, 14:11:35
    #2
    bootstrap 4 de resimler sabit boyutta olsa aslında row içinde olduğu için yükseklik vermeye de gerek kalmaz

    <div class="container">
    
    <div class="row" style="height: 200px;">
    
    <div class="col-4">
    <a title="1080p Gece Görüşlü Kamera" href="https://market.miuiturkiye.net/ev-ofis-guvenlik-kameralari/xiaomi-yi-home-2-1080P-gece-goruslu-smart-%C4%B1p-kamera">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-a.jpg" style="height: 500px;" class="img-responsive" alt="1080p Gece Görüşlü Kamera">
    </a>
    </div>
    <div class="col-4">
    <div class="col-6">
    <a title="Xiaomi Scooter" href="https://market.miuiturkiye.net/xiaomi-mijia-m365-pro-electric-scooter-elektrikli-scooter">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-b.jpg" style="height: 250px;" class="img-responsive" alt="Xiaomi Scooter">
    </a>
    </div>
    <div class="col-6">
    <a title="Xiaomi Verge Lite" href="https://market.miuiturkiye.net/xiaomi-amazfit-verge-lite">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-c.jpg" style="height: 250px;" class="img-responsive" alt="Xiaomi Verge Lite">
    </a>
    </div>
    </div>
    <div class="col-4"><a title="Xiaomi TWS Airdots Earphones Lite " href="https://market.miuiturkiye.net/xiaomi-tws-airdots-earphones-lite-bluetooth-kulaklik-beyaz">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-d.jpg" style="height: 500px;" class="img-responsive" alt="Xiaomi TWS Airdots Earphones Lite ">
    </a>
    </div>
    
    
    </div>
    
    </div>
  • 05-06-2020, 14:29:45
    #3
    CodeKod adlı üyeden alıntı: mesajı görüntüle
    bootstrap 4 de resimler sabit boyutta olsa aslında row içinde olduğu için yükseklik vermeye de gerek kalmaz

    <div class="container">
    
    <div class="row" style="height: 200px;">
    
    <div class="col-4">
    <a title="1080p Gece Görüşlü Kamera" href="https://market.miuiturkiye.net/ev-ofis-guvenlik-kameralari/xiaomi-yi-home-2-1080P-gece-goruslu-smart-%C4%B1p-kamera">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-a.jpg" style="height: 500px;" class="img-responsive" alt="1080p Gece Görüşlü Kamera">
    </a>
    </div>
    <div class="col-4">
    <div class="col-6">
    <a title="Xiaomi Scooter" href="https://market.miuiturkiye.net/xiaomi-mijia-m365-pro-electric-scooter-elektrikli-scooter">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-b.jpg" style="height: 250px;" class="img-responsive" alt="Xiaomi Scooter">
    </a>
    </div>
    <div class="col-6">
    <a title="Xiaomi Verge Lite" href="https://market.miuiturkiye.net/xiaomi-amazfit-verge-lite">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-c.jpg" style="height: 250px;" class="img-responsive" alt="Xiaomi Verge Lite">
    </a>
    </div>
    </div>
    <div class="col-4"><a title="Xiaomi TWS Airdots Earphones Lite " href="https://market.miuiturkiye.net/xiaomi-tws-airdots-earphones-lite-bluetooth-kulaklik-beyaz">
    <img src="https://market.miuiturkiye.net/image/catalog/banner/banner-d.jpg" style="height: 500px;" class="img-responsive" alt="Xiaomi TWS Airdots Earphones Lite ">
    </a>
    </div>
    
    
    </div>
    
    </div>
    Hocam bu şekilde olmuyor
  • 05-06-2020, 16:14:31
    #4
    Görselleri bakground image vererek istediğiniz görüntüyü elde edebilirsiniz.
    Aşağıda sizin için yaptığım örnek mevcut belki size bir fikir verir. Ancak görselleri cover yaptığım için yazılır okunmuyor görsellerin üzerine yazı yazarak değilde html olarak yazıları yaparsanız çok daha sağlıklı olur.
    https://codepen.io/salimsevindik/pen/zYrxywJ

    Aksi halde matematik hesabı yaparak görsellerinizin yüksekliklerini ve genişliklerini ayarlayarakta yapabilirsiniz.

    Mesela ekranın genişliği 1200 px dedik. 15x2 er piksek boşluklara verdik. (1200px-30px) / 3=390px fotolarının genişliği.

    Yükseklik olarakta 400 px olsun dedik. Ortadaki görsellerin yükseliği ne olacak (400px-15px)/2=192.5px de ortaki görselleri yaparsanız istediğiniz görüntü elde edersiniz.

    1. Foto : 390px X 400px
    2. Foto : 390px X 192.5px
    3. Foto : 390px X 192.5px
    4. Foto : 390px X 400px