ขนาดภาพ CSS, วิธีเติม, ไม่ยืด

ฉันมีภาพและฉันต้องการตั้งค่าความกว้างและความสูงเฉพาะ (เป็นพิกเซล)

แต่ถ้าฉันตั้งค่าความกว้างและความสูงโดยใช้ CSS (width:150px; height:100px ) รูปภาพจะถูกยืดออกและอาจน่าเกลียด

วิธีเติมภาพให้มีขนาดเฉพาะโดยใช้ CSS และไม่ยืดออกมันได้หรือไม่

ตัวอย่างการเติมและยืดภาพ:

ภาพต้นฉบับ:

ยืดภาพ:

ภาพที่เต็มไป:

โปรดทราบว่าในตัวอย่างภาพที่เติมด้านบน: ก่อนอื่นรูปภาพจะถูกปรับขนาดเป็น 150x255 (อัตราส่วนภาพคงที่) จากนั้นภาพจะถูกตัดเป็น 150x100

หากคุณต้องการใช้ภาพเป็นพื้นหลัง CSS ก็มีทางออกที่สวยงาม เพียงใช้coverหรือcontainในbackground-sizeคุณสมบัติ CSS3

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>​

ในขณะที่coverจะให้ภาพที่ปรับขนาดขึ้นคุณcontainจะให้ภาพที่ปรับขนาดลง ทั้งสองจะรักษาอัตราส่วนพิกเซล

http://jsfiddle.net/uTHqs/ (ใช้หน้าปก)

http://jsfiddle.net/HZ2FT/ (ใช้ในการบรรจุ)

วิธีการนี้มีข้อดีของการเป็นมิตรกับจอแสดงผล Retina ตามคู่มือฉบับย่อของ Thomas Fuchs

เป็นมูลค่าการกล่าวขวัญว่าการสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติทั้งสองไม่รวม IE6-8

object-fitคุณสามารถใช้คุณสมบัติของ CSS

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

ดูตัวอย่างได้ที่นี่

มี polyfill สำหรับ IE: https://github.com/anselmh/object-fit

การเพิ่มประสิทธิภาพในคำตอบข้างต้นโดย @afonsoduarte ( ไม่ได้รับการยอมรับอย่างใดอย่างหนึ่ง)
ในกรณีที่คุณใช้bootstrap

1. ให้บริการwidth:100%กับสไตล์
   สิ่งนี้มีประโยชน์หากคุณใช้bootstrapและต้องการให้ภาพขยายความกว้างที่มีทั้งหมด
   

2. การระบุheightคุณสมบัติเป็นทางเลือกคุณสามารถลบ / เก็บตามที่คุณต้องการ

   .cover {
      object-fit: cover;
      width: 100%;
      /*height: 300px;  optional, you can remove it, but in my case it was good */
   }

3. โดยวิธีการที่ไม่จำเป็นต้องให้heightและwidthคุณลักษณะในimageองค์ประกอบเพราะพวกเขาจะถูกแทนที่โดยสไตล์
   ดังนั้นก็เพียงพอที่จะเขียนอะไรเช่นนี้

   <img class="cover" src="url to img ..."  />

วิธีการเดียวที่แท้จริงคือการมีภาชนะรอบภาพและการใช้งานของคุณoverflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

มันเป็นความเจ็บปวดใน CSS ที่จะทำสิ่งที่คุณต้องการและจัดวางภาพไว้ตรงกลางมีการแก้ไขอย่างรวดเร็วใน jQuery เช่น:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

โซลูชัน CSS ไม่ใช่ JS และไม่มีภาพพื้นหลัง:

วิธีที่ 1 "มาร์จิ้นอัตโนมัติ" (IE8 + - ไม่ใช่ FF!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

วิธีที่ 2 "แปลง" (IE9 +):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

วิธีที่ 2 สามารถใช้เพื่อจัดกึ่งกลางภาพในคอนเทนเนอร์ความกว้าง / ความสูงคงที่ ทั้งสองสามารถล้น - และถ้าภาพมีขนาดเล็กกว่าภาชนะมันจะยังคงเป็นศูนย์กลาง

http://jsfiddle.net/5xjr05dt/3/

วิธีที่ 3 "wrapper คู่" (IE8 + - ไม่ใช่ FF!):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/

วิธีที่ 4 "double wrapper และ double image" (IE8 +):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

• วิธีที่ 1 มีการรองรับที่ดีขึ้นเล็กน้อย - คุณต้องกำหนดความกว้างหรือความสูงของภาพ!
• ด้วยคำนำหน้าวิธีที่ 2 ยังมีการสนับสนุนที่ดี (จาก IE9 ขึ้นไป) - วิธีที่ 2 ไม่รองรับ Opera mini!
• วิธีที่ 3 ใช้สอง wrappers - สามารถ overflow ความกว้างและความสูง
• วิธีที่ 4 ใช้ภาพซ้อน (หนึ่งภาพเป็นตัวยึดตำแหน่ง) สิ่งนี้จะให้แบนด์วิดท์เหนือศีรษะเป็นพิเศษ แต่ก็รองรับ crossbrowser ได้ดียิ่งขึ้น

วิธีที่ 1 และ 3 ดูเหมือนจะไม่ทำงานกับ Firefox

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

จากนั้นคุณสามารถทำได้ด้วยการ imgแท็กและเพียงตั้งค่าความกว้างสูงสุดและความสูงสูงสุดในองค์ประกอบ

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

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

หากคุณต้องการจัดกึ่งกลางภาพในแนวตั้งและแนวนอนคุณสามารถเปลี่ยนคอนเทนเนอร์ css เป็น:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

นี่คือ JS Fiddle http://jsfiddle.net/9kUYC/2/

การสร้างคำตอบของ @Dominic Green โดยใช้ jQuery นี่เป็นวิธีแก้ปัญหาที่ควรใช้กับรูปภาพที่กว้างกว่าที่เป็นสูงหรือสูงกว่ากว้าง

http://jsfiddle.net/grZLR/4/

อาจมีวิธีการใช้ JavaScript ที่หรูหรากว่า แต่ก็ใช้งานได้

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

• ไม่ได้ใช้พื้นหลัง css
• เพียง 1 div เพื่อตัดทิ้ง
• ปรับขนาดเป็นความกว้างขั้นต่ำกว่ารักษาอัตราส่วนภาพให้ถูกต้อง
• ครอบตัดจากกึ่งกลาง (แนวตั้งและแนวนอนคุณสามารถปรับได้ด้วยด้านบนซ้ายและแปลง)

ระวังถ้าคุณใช้งานธีมหรือบางอย่างพวกเขามักจะประกาศ img ความกว้างสูงสุดที่ 100% คุณไม่ต้องทำอะไรเลย ทดสอบ :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

ฉันช่วยสร้างปลั๊กอิน jQuery ชื่อFillmoreซึ่งจัดการกับbackground-size: coverในเบราว์เซอร์ที่สนับสนุนและมี shim สำหรับผู้ที่ไม่ได้ ลองดูสิ!

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

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

ลองอะไรเช่นนี้: http://jsfiddle.net/D7E3E/4/

ใช้ภาชนะที่มีมากเกิน: ซ่อน

แก้ไข: @Dominic Green เอาชนะฉัน

นี่จะเป็นการเติมรูปภาพให้มีขนาดเฉพาะโดยไม่ต้องยืดหรือไม่มีการครอบตัด

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

เพื่อให้พอดีกับภาพในแบบเต็มหน้าจอลอง:

พื้นหลังซ้ำ: รอบ;

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>