มีขนาดเท่ากับพื้นหลัง: ครอบคลุมและมีสำหรับองค์ประกอบภาพหรือไม่

ฉันมีเว็บไซต์ที่มีหลายหน้าและภาพพื้นหลังที่แตกต่างกันและฉันจะแสดงพวกเขาจาก CSS เช่น:

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

อย่างไรก็ตามฉันต้องการแสดงรูปภาพ (แบบเต็มหน้าจอ) ที่แตกต่างกันในหน้าเดียวโดยใช้<img>องค์ประกอบและฉันต้องการให้มีคุณสมบัติเดียวกันกับคุณสมบัติด้านบน background-image: cover;(ภาพที่ไม่สามารถแสดงได้จาก CSS จะต้องแสดงจากเอกสาร HTML)

ปกติฉันจะใช้:

div.mydiv img {
    width: 100%;
}

หรือ:

div.mydiv img {
    width: auto;
}

เพื่อให้ภาพเต็มและตอบสนอง อย่างไรก็ตามภาพหดตัวมากเกินไป ( width: 100%) เมื่อหน้าจอแคบเกินไปและแสดงสีพื้นหลังของร่างกายในหน้าจอด้านล่าง วิธีอื่นwidth: auto;ทำให้ภาพเต็มขนาดเท่านั้นและไม่ตอบสนองต่อขนาดหน้าจอ

มีวิธีการแสดงภาพในลักษณะเดียวกันกับที่background-size: coverทำหรือไม่?

โซลูชัน # 1 - คุณสมบัติobject-fit ( ขาดการสนับสนุน IE )

เพียงตั้งobject-fit: cover;บน img

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

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

ดูMDN - เกี่ยวกับobject-fit: cover:

เนื้อหาที่ถูกเปลี่ยนมีขนาดเพื่อรักษาอัตราส่วนภาพในขณะที่เติมช่องเนื้อหาทั้งหมดขององค์ประกอบ หากอัตราส่วนภาพของวัตถุไม่ตรงกับอัตราส่วนภาพของกล่องวัตถุจะถูกตัดให้พอดี

ดูการสาธิต Codepen นี้ซึ่งเปรียบเทียบobject-fit: coverกับภาพที่background-size: coverใช้กับภาพพื้นหลัง

โซลูชัน # 2 - แทนที่ img ด้วยภาพพื้นหลังด้วย css

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" />

จริงๆแล้วมีวิธีแก้ปัญหา cssอย่างง่าย ๆที่ใช้งานได้กับ IE8:

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

สมมติว่าคุณสามารถจัดเรียงเพื่อให้มีส่วนประกอบของคอนเทนเนอร์ที่คุณต้องการเติมสิ่งนี้ดูเหมือนจะใช้งานได้ แต่รู้สึกแฮ็คเล็กน้อย ในสาระสำคัญฉันเพิ่งใช้min/max-width/heightในพื้นที่ที่มีขนาดใหญ่ขึ้นจากนั้นปรับขนาดพื้นที่กลับเป็นขนาดดั้งเดิม

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

ฉันพบวิธีแก้ปัญหาง่าย ๆ ในการเลียนแบบฝาครอบและบรรจุซึ่งเป็น CSS บริสุทธิ์และทำงานกับคอนเทนเนอร์ที่มีมิติแบบไดนามิกและไม่ จำกัด อัตราส่วนภาพใด ๆ

โปรดทราบว่าหากคุณไม่จำเป็นต้องรองรับ IE หรือ Edge ก่อน 16 คุณควรใช้ object-fit

ขนาดพื้นหลัง: ปก

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

1,000% ถูกใช้ที่นี่ในกรณีที่ขนาดของภาพใหญ่กว่าขนาดที่แสดง ตัวอย่างเช่นหากภาพมีขนาด 500x500 แต่คอนเทนเนอร์มีขนาด 200x200 เท่านั้น ด้วยวิธีนี้ภาพจะถูกปรับขนาดเป็น 2000x2000 (เนื่องจากความกว้างต่ำสุด / ความสูงต่ำสุด) จากนั้นปรับขนาดให้เหลือ 200x200 (เนื่องจากtransform: scale(0.1))

ปัจจัย x10 สามารถถูกแทนที่ด้วย x100 หรือ x1000 แต่โดยทั่วไปแล้วมันไม่เหมาะที่จะให้มีการแสดงผลภาพ 2000x2000 ในขนาด 20x20 div :)

พื้นหลังขนาด: มี

ทำตามหลักการเดียวกันคุณสามารถใช้เพื่อเลียนแบบ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>

ไม่คุณไม่สามารถรับมันได้เหมือนbackground-size:cover แต่ ..

วิธีการนี้ค่อนข้างใกล้เคียง: ใช้ JavaScript เพื่อกำหนดว่ารูปภาพเป็นแนวนอนหรือแนวตั้งและใช้สไตล์ตามนั้นหรือไม่

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/

ฉันต้องการเลียนแบบbackground-size: containแต่ใช้ไม่ได้object-fitเนื่องจากขาดการสนับสนุน ภาพของฉันมีตู้คอนเทนเนอร์ที่มีมิติที่กำหนดไว้และสิ่งนี้ใช้ได้สำหรับฉัน:

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

ลองตั้งค่าทั้งสอง min-heightและmin-widthด้วยdisplay:block:

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

( ซอ )

ให้องค์ประกอบที่มีภาพของคุณเป็นposition:relativeหรือposition:absoluteภาพจะครอบคลุมภาชนะ อย่างไรก็ตามมันจะไม่อยู่กึ่งกลาง

คุณสามารถจัดกึ่งกลางภาพได้อย่างง่ายดายถ้าคุณรู้ว่าจะล้นในแนวนอน (ตั้งค่าmargin-left:-50%) หรือแนวตั้ง (ตั้งค่าmargin-top:-50%) อาจเป็นไปได้ที่จะใช้การสืบค้นสื่อ CSS (และคณิตศาสตร์) เพื่อหาคำตอบ

ด้วย CSS object-fit: [cover|contain];คุณสามารถจำลอง มันใช้งานและ transform มันไม่สมบูรณ์แบบ ไม่สามารถใช้งานได้ในกรณีเดียว: หากภาพกว้างและสั้นกว่าคอนเทนเนอร์[max|min]-[width|height]

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

สิ่งที่คุณสามารถทำได้คือใช้แอตทริบิวต์ 'style' เพื่อเพิ่มภาพพื้นหลังให้กับองค์ประกอบวิธีที่คุณจะยังคงเรียกรูปภาพใน HTML แต่คุณจะยังสามารถใช้ background-size: พฤติกรรม css:

HTML:

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

CSS:

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

นี่คือวิธีที่ฉันเพิ่มขนาดพื้นหลัง: ลักษณะการทำงานที่ครอบคลุมกับองค์ประกอบที่ฉันต้องการโหลดเป็น HTML แบบไดนามิก จากนั้นคุณสามารถใช้คลาส css ที่ยอดเยี่ยมเช่นพื้นหลังตำแหน่ง: กึ่งกลาง ความเจริญ

สำหรับ IE คุณต้องรวมบรรทัดที่สอง - ความกว้าง: 100%;

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

ฉันไม่ได้รับอนุญาตให้ 'เพิ่มความคิดเห็น' ดังนั้นการทำเช่นนี้ แต่แท้จริงแล้วสิ่งที่ Eru Penkman ทำนั้นเป็นจุดที่สวยมากในการรับมันเหมือนพื้นหลังครอบคลุมทั้งหมดที่คุณต้องทำคือการเปลี่ยนแปลง

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

ถึง

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

ฉันรู้ว่านี่เก่า แต่วิธีแก้ปัญหาหลายอย่างที่ฉันเห็นด้านบนมีปัญหากับรูปภาพ / วิดีโอที่มีขนาดใหญ่เกินไปสำหรับคอนเทนเนอร์ดังนั้นจึงไม่ทำหน้าที่เหมือนฝาครอบพื้นหลังขนาดจริง อย่างไรก็ตามฉันตัดสินใจที่จะสร้าง "ยูทิลิตี้คลาส" เพื่อให้สามารถทำงานกับรูปภาพและวิดีโอได้ คุณเพียงแค่ให้คอนเทนเนอร์คลาส. media-cover-wrapper และไอเท็มสื่อเป็น class .media-cover

จากนั้นคุณมี jQuery ต่อไปนี้:

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

เมื่อโทรติดต่อตรวจสอบให้แน่ใจว่าดูแลการปรับขนาดหน้า:

mediaCoverBounds();

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

จากนั้น 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%);
}

ใช่มันอาจต้อง jQuery แต่มันตอบสนองได้ดีและทำหน้าที่เหมือนกับขนาดพื้นหลัง: ครอบคลุมและคุณสามารถใช้มันกับภาพและ / หรือวิดีโอเพื่อรับค่า SEO ที่พิเศษ

เราสามารถใช้วิธีการซูม เราสามารถสันนิษฐานได้ว่าสูงสุด 30% (หรือสูงกว่า 100%) สามารถเป็นเอฟเฟกต์การซูมได้หากความสูงของภาพด้านกว้างหรือความกว้างน้อยกว่าความสูงหรือความกว้างที่ต้องการ เราสามารถซ่อนส่วนที่เหลือที่ไม่ต้องการด้วยการล้นได้: ซ่อน

.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%);
}

วิธีนี้จะปรับภาพที่มีความกว้างหรือความสูงต่างกัน

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

พบอาการที่แน่นอนเดียวกัน ข้างต้นทำงานให้ฉัน