Kích thước hình ảnh CSS, làm thế nào để điền, không kéo dài?

Tôi có một hình ảnh và tôi muốn đặt chiều rộng và chiều cao cụ thể (tính bằng pixel)

Nhưng nếu tôi đặt chiều rộng và chiều cao bằng css ( width:150px; height:100px), hình ảnh sẽ bị kéo dài và nó có thể xấu.

Làm cách nào để lấp đầy hình ảnh đến một kích thước cụ thể bằng CSS và không kéo dài nó?

Ví dụ về hình ảnh điền và kéo dài:

Ảnh gốc:

Hình ảnh kéo dài:

Hình ảnh đầy:

Xin lưu ý rằng trong ví dụ về hình ảnh đã điền ở trên: đầu tiên, hình ảnh được thay đổi kích thước thành 150x255 (tỷ lệ khung hình được duy trì), và sau đó, nó được cắt thành 150x100.

Nếu bạn muốn sử dụng hình ảnh làm nền CSS, có một giải pháp tao nhã. Chỉ cần sử dụng coverhoặc containtrong thuộc tính background-sizeCSS3.

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

Trong khi coversẽ cung cấp cho bạn một hình ảnh thu nhỏ, containsẽ cung cấp cho bạn một hình ảnh thu nhỏ. Cả hai sẽ duy trì tỷ lệ khung hình pixel.

http://jsfiddle.net/uTHqs/ (sử dụng bìa)

http://jsfiddle.net/HZ2FT/ (sử dụng chứa)

Cách tiếp cận này có lợi thế là thân thiện với màn hình Retina theo hướng dẫn nhanh của Thomas Fuchs.

Điều đáng nói là trình duyệt hỗ trợ cho cả hai thuộc tính loại trừ IE6-8.

Bạn có thể sử dụng thuộc tính css object-fit.

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

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

Xem ví dụ ở đây

Có một polyfill cho IE: https://github.com/anselmh/object-fit

Enhancement trên câu trả lời ở trên bởi @afonsoduarte ( KHÔNG một trong những được chấp nhận) .
trong trường hợp bạn đang sử dụng bootstrap

1. Cung cấp width:100%về phong cách.
   Điều này rất hữu ích nếu bạn đang sử dụng bootstrap và muốn hình ảnh kéo dài tất cả chiều rộng có sẵn.
   

2. Chỉ định thuộc heighttính là tùy chọn, Bạn có thể xóa / giữ nó khi bạn cần

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

3. Nhân tiện, KHÔNG cần phải cung cấp các thuộc tính heightvà widththuộc tính trên imagephần tử bởi vì chúng sẽ bị ghi đè bởi kiểu.
   Vì vậy, nó là đủ để viết một cái gì đó như thế này.

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

Cách thực sự duy nhất là có một thùng chứa xung quanh hình ảnh của bạn và sử dụng 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 rất khó để làm những gì bạn muốn và căn giữa hình ảnh, có một cách khắc phục nhanh trong jquery như:

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/

Giải pháp CSS không có JS và không có hình nền:

Phương pháp 1 "lề tự động" (IE8 + - KHÔNG 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/

Phương pháp 2 "biến đổi" (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/

Phương pháp 2 có thể được sử dụng để căn giữa một hình ảnh trong một thùng chứa chiều rộng / chiều cao cố định. Cả hai đều có thể tràn - và nếu hình ảnh nhỏ hơn thùng chứa thì nó vẫn sẽ được căn giữa.

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

Phương pháp 3 "trình bao bọc kép" (IE8 + - KHÔNG 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/

Phương pháp 4 "trình bao bọc kép và hình ảnh kép" (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/

• Phương pháp 1 có hỗ trợ tốt hơn một chút - bạn phải đặt chiều rộng HOẶC chiều cao của hình ảnh!
• Với tiền tố phương thức 2 cũng có hỗ trợ khá (từ eg9 trở lên) - Phương thức 2 không hỗ trợ trên Opera mini!
• Phương pháp 3 sử dụng hai hàm bao - có thể tràn chiều rộng VÀ chiều cao.
• Phương pháp 4 sử dụng một hình ảnh kép (một như giữ chỗ) điều này cung cấp thêm một số chi phí băng thông, nhưng thậm chí còn hỗ trợ lai tốt hơn.

Phương pháp 1 và 3 dường như không hoạt động với Firefox

Một giải pháp khác là đặt hình ảnh trong một thùng chứa với chiều rộng và chiều cao mong muốn. Sử dụng phương pháp này, bạn sẽ không phải đặt hình ảnh làm hình nền của một yếu tố.

Sau đó, bạn có thể làm điều này với một imgthẻ và chỉ cần đặt chiều rộng tối đa và chiều cao tối đa trên phần tử.

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>

Bây giờ khi bạn thay đổi kích thước của container, hình ảnh sẽ tự động phát triển lớn nhất có thể mà không cần đi ra ngoài giới hạn hoặc bóp méo.

Nếu bạn muốn căn giữa hình ảnh theo chiều dọc và chiều ngang, bạn có thể thay đổi css container thành:

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

Dưới đây là một Fiddle JS http://jsfiddle.net/9kUYC/2/

Xây dựng câu trả lời của @Dominic Green bằng jQuery, đây là một giải pháp nên hoạt động đối với các hình ảnh rộng hơn cao hoặc cao hơn rộng.

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

Có lẽ có một cách thanh lịch hơn để làm JavaScript, nhưng điều này không hoạt động.

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();

• Không sử dụng nền css
• Chỉ có 1 div để cắt nó
• Thay đổi kích thước thành chiều rộng tối thiểu hơn giữ tỷ lệ khung hình chính xác
• Cắt từ trung tâm (theo chiều dọc và chiều ngang, bạn có thể điều chỉnh điều đó với đỉnh, lef & biến đổi)

Hãy cẩn thận nếu bạn đang sử dụng một chủ đề hoặc một cái gì đó, họ sẽ thường khai báo img độ rộng tối đa ở mức 100%. Bạn phải làm cho không. Hãy thử đi :)

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

Tôi đã giúp xây dựng một plugin jQuery có tên Fillmore , xử lý các background-size: covertrình duyệt hỗ trợ nó và có một phần mềm cho những người không sử dụng. Hãy nhìn xem!

Tôi nghĩ rằng nó khá muộn cho câu trả lời này. Dù sao, hy vọng điều này sẽ giúp ai đó trong tương lai. Tôi phải đối mặt với vấn đề định vị các thẻ trong góc. Có thẻ hiển thị cho các sự kiện. Nếu chiều rộng hình ảnh của sự kiện là lớn đối với thẻ, hình ảnh phải được hiển thị bằng cách cắt từ hai bên và chiều cao 100%. Nếu chiều cao hình ảnh dài, phần dưới cùng của hình ảnh bị cắt và chiều rộng là 100%. Đây là giải pháp css thuần túy của tôi cho việc này:

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;
}

Hãy thử một cái gì đó như thế này: http://jsfiddle.net/D7E3E/4/

Sử dụng một container có tràn: ẩn

EDIT: @Dominic Green đánh bại tôi.

Điều này sẽ Điền hình ảnh đến một kích thước cụ thể, mà không kéo dài nó hoặc không cắt xén nó

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;
}

Để phù hợp với hình ảnh trong toàn màn hình, hãy thử điều này:

lặp lại nền: tròn;

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

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