Slider'a görsel nasıl sığdırılır?

  • Konuyu başlatan soon
  • Başlangıç Tarihi
  • Mesaj 12
  • Görüntüleme 1.901

soon

Hectopat
Katılım
16 Şubat 2021
Mesajlar
581
Çözümler
3
Sadece görseli Slider'a sığdırmak istiyorum, nasıl yapabilirim?

HTML:
<!-- Hero Section Begin -->
<section class="hero-section">
    <div class="hs-slider owl-carousel">
        @foreach($sliderdata as $rs)
        <div class="hs-item set-bg" data-setbg="{{Storage::url($rs->image)}}" style="width: 1920px;height: 1040px">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-6">
                        <div class="hi-text">
                            <span>{{$rs->title}}</span>
                            <h1>Be <strong>strong</strong> traning hard</h1>
                            <a href="#" class="primary-btn">Get info</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>
<!-- Hero Section End -->
Diğer itemları etkilemeden eklenen görseli Slider'a sığdırmanın bir yolu yok mu arkadaşlar?
@Ecmel Hocam bakabilir misiniz?
 
Son düzenleme:
Görseli rastgele seçtim:
phyton.jpg
 

Dosya Ekleri

  • 1.png
    1.png
    750,7 KB · Görüntüleme: 51
  • 2.png
    2.png
    810 KB · Görüntüleme: 57
@soon Görsel dikey baya ondan dolayı aklıma görselin boyutlarını değiştirmeden her yerinin ekranda gözükmesini sağlamak için bir yöntem gelmiyor.

En mantıklı olan ".set-bg" classına background-size: contain; vererek tüm resmin çıkmasını sağlamak ama resim boylamasına olduğu için sağ ve solu açık kalacaktır. Oralarını da background-repeat: repeat; ile kapatabilirsin ama ne kadar mantıklı duracağı görsele göre değişir.

Şu anda aklıma başka bir çözüm gelmedi, aslında buna benzer bir problemi daha önce çözmüştüm ama bu kadar dikey olan bir görselde başka şeyler düşünmek gerekiyor.
 

Technopat Haberler

Yeni konular

Geri
Yukarı