Arka plan boyutuna eşdeğer var mı: resim öğeleri için ört ve içer

Birçok sayfa ve farklı arka plan resimleri olan bir sitem var ve bunları CSS'den aşağıdaki gibi görüntülüyorum:

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

Ancak, <img>öğeleri kullanarak bir sayfada farklı (tam ekran) resimler göstermek istiyorum ve yukarıdaki background-image: cover;özelliği ile aynı özelliklere sahip olmasını istiyorum (görüntüler CSS görüntülenemez, HTML belgesinden görüntülenmesi gerekir).

Normalde kullanıyorum:

div.mydiv img {
    width: 100%;
}

Veya:

div.mydiv img {
    width: auto;
}

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

Görüntüyü aynı şekilde görüntülemenin bir yolu var mı background-size: cover?

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

Sadece object-fit: cover;img.

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<img src="http://lorempixel.com/1500/1000" />

Bkz. MDN - ilgili object-fit: cover:

Değiştirilen içerik, öğenin tüm içerik kutusunu doldururken en boy oranını koruyacak şekilde boyutlandırılır. Nesnenin en boy oranı kutusunun en boy oranıyla eşleşmezse, nesne sığacak şekilde kırpılır.

Ayrıca, bir arka plan görüntüsüne uygulanan bir resme uygulanan ile karşılaştırılan bu Codepen demosuna bakınobject-fit: coverbackground-size: cover

Çözüm # 2 - IMG'yi 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" />

Aslında IE8 üzerinde ç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>

Doldurmak istediğiniz bir kap öğesi ayarlayabileceğinizi varsayarsak, bu işe yarıyor gibi görünüyor, ancak biraz huysuz hissediyor. Özünde, sadece min/max-width/heightdaha geniş bir alanda kullanıyorum ve sonra o alanı orijinal boyutlarına geri ö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>

Saf CSS olan ve dinamik boyutlara sahip kaplar için çalışan ve aynı zamanda görüntü oranı üzerinde herhangi bir kısıtlama yapmayan hem kapak hem de içerme öykünmesi için basit bir çözüm buldum.

IE veya 16'dan önce Edge'i desteklemeniz gerekmiyorsa, nesne sığdırmayı daha iyi kullanacağınızı unutmayın.

arka plan boyutu: kapak

.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>

% 1000, görüntünün doğal boyutunun görüntülenmekte olan boyuttan büyük olması durumunda kullanılır. Örneğin, görüntü 500x500 ise, ancak kap yalnızca 200x200 ise. Bu çözümle, görüntü 2000x2000 olarak (min genişlik / min yükseklik nedeniyle) yeniden boyutlandırılacak, sonra 200x200 değerine kadar ölçeklenecektir (nedeniyle transform: scale(0.1)).

X10 faktörü, x100 veya x1000 ile değiştirilebilir, ancak 20x20 div'de 2000x2000 boyutlarında bir görüntünün oluşturulması genellikle ideal değildir. :)

arka plan boyutu: içerir

Aynı prensibi izleyerek, taklit etmek için de kullanabilirsiniz background-size: contain:

.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>

Hayýr , baţka bir ţekilde alamazsýn background-size:cover ama ..

Bu yaklaşım oldukça yakındır: görüntünün yatay mı yoksa dikey mi olduğunu belirlemek için JavaScript kullanır ve stilleri buna göre uygular.

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/

Taklit etmeye ihtiyacım vardı background-size: contain, ancak object-fitdestek eksikliği nedeniyle kullanamadım . Resimlerimin tanımlanmış boyutları olan kapları vardı ve bu benim için çalıştı:

.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>

Belirlemeyi deneyin hem min-height ve min-widthsahip display:block:

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

( keman )

Resminizin içeren öğesinin olması şartıyla position:relativeveya position:absoluteresim kabı kaplayacaktır. Ancak, ortalanmayacaktır.

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

CSS ile simüle edebilirsiniz object-fit: [cover|contain];. Kullanımı transformve [max|min]-[width|height]. Mükemmel değil. Bu bir durumda işe yaramaz: görüntü kaptan daha geniş ve kısaysa.

.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>

Yapabileceğiniz şey, arka plan resmini öğeye eklemek için 'stil' özelliğini kullanmaktır, böylece HTML'deki görüntüyü kullanmaya 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;
    }

Arka plan boyutu: kapak davranışını dinamik olarak HTML'ye yüklemem gereken öğelere bu şekilde eklerim. Ardından background-position: center gibi harika css sınıflarını kullanabilirsiniz. Boom

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

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

im 'yorum eklemek için izin verilmiyor, bu yüzden, ama evet Eru Penkman ne yaptı hemen hemen, arka plan kapağı gibi almak için tüm yapmanız gereken 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%;
}

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 yüzden aslında arka plan boyutu kapağı gibi davranmıyor. Ancak, resim ve videolar için işe yarayacağı şekilde "faydalı sınıflar" yapmaya karar verdim. Kapsayıcıya .media-cover-wrapper sınıfını ve medya öğesinin kendisini .media-cover sınıfını vermeniz yeterlidir.

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 verir ve tam olarak arka plan boyutu gibi davranır: kapak ve bu ekstra SEO değerini elde etmek için görüntü ve / veya videolar üzerinde kullanabilirsiniz.

ZOOM yaklaşımını benimseyebiliriz. En boy görüntü yüksekliği VEYA genişliği istenen yükseklik VEYA genişliğinden daha azsa, maksimum% 30 (veya% 100'e kadar) zoom etkisi olabileceğini varsayabiliriz. Gereksiz 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şlikteki VEYA yüksekliğindeki görüntüleri ayarlayacaktır.

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

aynı tam semptomatiklerle karşılaştı. yukarıda benim için çalıştı.