web-gelistirme-sc.com

Arka plan boyutuna eşdeğer var mı: cover ve image unsurları için?

Çok sayıda sayfa ve farklı arkaplan resimleri olan bir sitem var ve bunları CSS'den gösteriyorum:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

Bununla birlikte, bir sayfada <img> elemanlarını kullanarak farklı (tam ekran) resimler göstermek istiyorum ve bunların yukarıdaki background-image: cover; özelliğiyle aynı özelliklere sahip olmasını istiyorum (resimler CSS'den görüntülenemiyor, HTML belgesinde gösterilmelidir) .

Normalde kullanıyorum:

div.mydiv img {
    width: 100%;
}

Veya:

div.mydiv img {
    width: auto;
}

resmi tam ve duyarlı hale getirmek için. Ancak ekran çok daraldığında resim çok fazla küçülür (width: 100%) ve vücudun arka plan rengini alt ekranda gösterir. Diğer width: auto; yöntemi, görüntüyü yalnızca tam boyutta yapar ve ekran boyutuna yanıt vermez.

Resmi görüntülemek için background-size: cover ile aynı şekilde görüntülemenin bir yolu var mı?

167
stormpat

Çözüm # 1 - object-fit özelliği ( Eksik IE desteği )

Sadece img üzerinde object-fit: cover; ayarlayın.

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000" />

Bakınız MDN - object-fit: cover ile ilgili:

Değiştirilen içerik en boy oranını koruyacak şekilde boyutlandırılır. öğenin tüm içerik kutusunu doldurma. Nesnenin en boy oranı ise kutusunun en boy oranıyla eşleşmiyorsa, nesne .__ olacaktır. sığdırmak için kırpılmış.

Ayrıca, arkaplan resmine uygulanan object-fit: cover ile resme uygulanan background-size: cover ile karşılaştıran bu Codepen demosuna bakınız. 


Çözüm # 2 - img'yi bir css ile arka plan görüntüsü ile değiştirin

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}
<img src="http://placehold.it/1500x1000" />

288
Danield

IE8'de bile çalışan oldukça basit bir css çözümü var:

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}
<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

27
Simon

Doldurmak istediğiniz bir kap elementine sahip olabileceğinizi varsayarsak, bu işe yarıyor ama biraz garip geliyor. Aslında, daha geniş bir alanda min/max-width/height kullanıyorum ve sonra o alanı tekrar orijinal boyutlarına ölçeklendiriyorum.

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
<h1>contain</h1>
  <div class="container contain">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>

14
Ulrich Schwarz

Hayır, background-size:cover 'a benzemiyorsunuz. Ama ..

Bu yaklaşım oldukça yakın: görüntünün yatay mı portre mu olduğunu belirlemek için JavaScript kullanıyor ve stilleri buna göre uyguluyor.

JS

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

8
roo2

background-size: contain taklit etmem gerekiyordu, ancak destek olmadığından object-fit kullanamıyordum. Görüntülerim tanımlanmış boyutlara sahip kaplara sahipti ve bu benim için çalışmaya başladı:

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

2
Gus

Hem kapağı hem de içerdiğini taklit etmek için saf CSS olan ve dinamik boyutlara sahip kaplar için çalışan ve aynı zamanda görüntü oranında herhangi bir kısıtlama olmayan basit bir çözüm buldum.

IE’yi veya Edge’i 16’dan önce desteklemeniz gerekmiyorsa, object-fit işlevini daha iyi kullandığınızı unutmayın.

arkaplan büyüklüğü: cover

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}
<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Görüntünün doğal boyutunun, görüntülenen boyuttan büyük olması durumunda,% 1000 kullanılır. Örneğin, görüntü 500x500, ancak kap yalnızca 200x200 ise. Bu çözümle, görüntü 2000x2000'e (minimum genişlik/minimum yükseklik nedeniyle) yeniden boyutlandırılacak, ardından 200x200'e (transform: scale(0.1) nedeniyle) ölçeklenecek.

X10 faktörü x100 veya x1000 ile değiştirilebilir, ancak 2000x2000 boyutunda bir görüntüyü 20x20 div'de oluşturmak ideal değildir. :)

arka plan boyutu: içerir

Aynı prensibi izleyerek, background-size: contain: .__ 'ya benzemek için de kullanabilirsiniz.

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}
<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

2
Thiago Barcala

Yapabilecekleriniz, arka plan görüntüsünü öğeye eklemek için 'style' özelliğini kullanmaktır, bu şekilde görüntüyü HTML'de çağırmaya devam edersiniz, ancak yine de background-size: cover css davranışını kullanabilirsiniz:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS:

    .image-div{
    background-size: cover;
    }

Background-size: cover davranışını, dinamik olarak HTML'ye yüklemem gereken öğelere şu şekilde ekliyorum. Ardından, background-position: center gibi harika css sınıflarını kullanabilirsiniz. Boom

2
Charlie Tupman

Bothmin-height ve min-width öğelerini ayarlamayı deneyin, display:block ile:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

( keman )

Resminizi içeren öğenin position:relative veya position:absolute olması şartıyla, görüntü kabı kapsayacaktır. Ancak, merkezlenmeyecek.

Yatay mi (set margin-left:-50%) mi yoksa dikey mi (set margin-top:-50%) mi taşacağını biliyorsanız görüntüyü kolayca ortalayabilirsiniz. Bunu anlamak için CSS medya sorgularını (ve bazı matematik) kullanmak mümkün olabilir.

2
Jeremy

Bunun eski olduğunu biliyorum, ancak yukarıda gördüğüm birçok çözümün, görüntü/videonun kap için çok büyük olmasıyla ilgili bir sorunu var, bu nedenle arka plan boyutunda kapak gibi davranmıyor. Ancak, görüntüler ve videolar için işe yaraması için "yardımcı sınıflar" yapmaya karar verdim. Kapsayıcıya yalnızca .media-cover-wrapper sınıfı ve ortam öğesinin kendisi de .media-cover sınıfı verirsiniz 

Sonra aşağıdaki jQuery var:

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

Arama yaparken sayfanın yeniden boyutlandırılmasına dikkat edin:

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

Sonra aşağıdaki CSS:

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Evet, jQuery gerektirebilir, ancak oldukça iyi yanıt veriyor ve arka plan boyutunda gibi davranıyor: kapak ve bu ekstra SEO değerini elde etmek için görüntü ve/veya videolarda kullanabilirsiniz.

0
Secular12

ZOOM yaklaşımını alabiliriz. En boy görüntü yüksekliği OR genişlik istenen yükseklik OR genişlikten azsa, maksimum% 30 (veya% 100'e kadar) yakınlaştırma efekti olabileceğini varsayıyoruz. Gerektiğinde kalan alanı taşma ile gizleyebiliriz: gizli.

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Bu, farklı genişlikte OR yüksekliğe sahip görüntüleri ayarlayacaktır.

0
Rehmat

IE için ayrıca ikinci satırı eklemeniz gerekir - genişlik:% 100; 

.mydiv img {
    max-width: 100%;
    width: 100%;
}
0

CSS ile object-fit: [cover|contain]; öğesini simüle edebilirsiniz. transform ve [max|min]-[width|height]./'İ kullanır. Mükemmel değil. Bir durumda çalışmaz: eğer görüntü konteynerden daha geniş ve daha kısa ise.

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>

0
mems

bunu ekleyemem 'yorumunu ekleyemem', bu yüzden Eru Penkman'ın yaptığı şey, arka plan kapağı gibi almak için yapmanız gereken tek şey değiştirmek. 

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

TO

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}

0
Asim Ramay