"Otomatik" yüksekliğe sahip% 100 genişlikte arka plan resmi

Şu anda bir şirket için bir mobil açılış sayfası üzerinde çalışıyorum. Bu gerçekten basit bir düzen ancak başlığın altında her zaman% 100 genişlikte olacak bir ürün resmi var (tasarım her zaman bir kenardan kenara gittiğini gösteriyor). Ekranın genişliğine bağlı olarak görüntünün yüksekliği açıkça buna göre ayarlanacaktır. Bunu başlangıçta bir img (% 100 CSS genişliğinde) ile yaptım ve harika çalıştı, ancak farklı çözünürlüklere dayalı olarak farklı görüntüler sunmak için medya sorgularını kullanmak istediğimi fark ettim - küçük, orta ve örneğin aynı görüntünün büyük bir versiyonu. İmg src'yi CSS ile değiştiremeyeceğinizi biliyorum, bu yüzden HTML'deki bir img etiketi yerine resim için bir CSS arka planı kullanmam gerektiğini düşündüm.

Arka plan resmine sahip div'in arka planı göstermek için hem genişliğe hem de yüksekliğe ihtiyacı olduğu için bunu düzgün bir şekilde çalıştıramıyorum. Açıkça 'width: 100%' kullanabilirim ama yükseklik için ne kullanmalıyım? 150px gibi rastgele sabit bir yükseklik koyabilirim ve sonra görüntünün en üst 150 pikselini görebilirim ancak sabit bir yükseklik olmadığı için çözüm bu değil. Bir oyun oynadım ve bir kez yükseklik olduğunda (150px ile test edildi) görüntüyü div'e doğru şekilde sığdırmak için 'background-size: 100%' kullanabileceğimi keşfettim. Yalnızca mobil cihazlara yönelik olduğu için bu proje için daha yeni CSS3'ü kullanabilirim.

Aşağıya kaba bir örnek ekledim. Lütfen satır içi stilleri mazur görün ama sorumu biraz daha netleştirmek için basit bir örnek vermek istedim.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Tüm sayfaya bağlı olarak kapsayıcı div'e bir yüzde yüksekliği vermek zorunda mıyım yoksa buna tamamen yanlış mı bakıyorum?

Ayrıca, CSS arka planlarının bunu yapmanın en iyi yolu olduğunu düşünüyor musunuz? Belki cihaz / ekran genişliğine bağlı olarak farklı img etiketleri sunan bir teknik vardır. Genel fikir, açılış sayfası şablonunun farklı ürün resimleriyle defalarca kullanılacağıdır, bu yüzden bunu mümkün olan en iyi şekilde geliştirdiğimden emin olmalıyım.

Özür dilerim, bu biraz uzun soluklu ama bu projeden diğerine gidip geliyorum, bu yüzden bu küçük şeyi yapmak istiyorum. Zaman ayırdığınız için şimdiden teşekkürler, çok takdir edilmektedir. Saygılarımızla

Kullanmak yerine doğrudan background-imagekullanabilirsiniz imgve görüntü alanının tüm genişliğine yayılmasını sağlamak için görüntüyü kullanmayı deneyin max-width:100%;ve lütfen ana kapsayıcı div'inize herhangi bir dolgu veya kenar boşluğu uygulamayın çünkü bunlar kabın toplam genişliğini artıracaktır. Bu kuralı kullanarak tarayıcının genişliğine eşit bir görüntü genişliğine sahip olabilirsiniz ve yükseklik de en boy oranına göre değişecektir. Teşekkürler.

Düzenle: Pencerenin farklı boyutundaki görüntüyü değiştirme

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

Bu şekilde, görüntünüzü tarayıcının farklı boyutlarında değiştirirsiniz.

Tim S., "doğru" cevaba çok daha yakındı, ardından şu anda kabul edilen cevaptı. CSS ile yapılan% 100 genişlikte, değişken yükseklikte bir arka plan resmine sahip olmak istiyorsanız cover(bu, görüntünün yanlardan dışarı uzanmasına izin verir) veya contain(görüntünün hiç genişlemesine izin vermez) kullanmak yerine, sadece CSS'yi şu şekilde ayarlayın:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Bu, arka plan resminizi% 100 genişliğe ayarlar ve yüksekliğin taşmasına izin verir. Artık JavaScript'e güvenmek yerine bu görüntüyü değiştirmek için medya sorgularını kullanabilirsiniz.

DÜZENLEME: Az önce fark ettim (3 ay sonra) muhtemelen görüntünün taşmasını istemiyorsunuz; kapsayıcı öğesinin arka plan görüntüsüne göre yeniden boyutlandırılmasını istiyorsunuz (en boy oranını korumak için), bu bildiğim kadarıyla CSS ile mümkün değil.

Umarım yakında yeni srcset özniteliğini öğede kullanabileceksiniz img. imgÖğeleri şimdi kullanmak istiyorsanız , şu anda kabul edilen cevap muhtemelen en iyisidir.

Bununla birlikte, tamamen CSS kullanarak sabit bir en boy oranına sahip duyarlı bir arka plan resmi öğesi oluşturabilirsiniz. Bunu yapmak için height, 0'a ve şu padding-bottomşekilde, öğenin kendi genişliğinin bir yüzdesine ayarlarsınız :

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Farklı en boy oranlarını kullanmak için, orijinal görüntünün yüksekliğini kendi genişliğine bölün ve yüzde değerini elde etmek için 100 ile çarpın. Bu işe yarar çünkü dolgu yüzdesi, dikey dolgu olsa bile her zaman genişliğe göre hesaplanır.

Bunu dene

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Basitleştirilmiş versiyon

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

CSS özelliğini kullanabilir background-sizeve bunu coverveyacontain tercihinize bağlı olarak . Kapak, pencereyi tamamen kaplarken, bir tarafı pencereye sığdırarak tüm sayfayı kaplamaz (ekranın en boy oranı görüntüye eşit olmadığı sürece).

Lütfen bunun bir CSS3 özelliği olduğunu unutmayın. Daha eski tarayıcılarda bu özellik göz ardı edilir. Alternatif olarak, pencere boyutuna bağlı olarak CSS ayarlarını değiştirmek için javascript kullanabilirsiniz, ancak bu tercih edilmez.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Sadece iki renkli bir arka plan resmi kullanın:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

CSS'yi ekleyin:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

Ve html:

<div class="bg-mg"></div>

CSS: arka plan resmini ekranın% 100 genişliğine ve yüksekliğine germek?

Yıl 2017 ve şimdi iyi bir desteğe sahip olan nesne uydurmayı kullanabilirsiniz . Bir div ile aynı şekilde çalışır, ancak öğenin kendisinde ve resimler dahil herhangi bir öğede çalışır.background-size

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}