Tôi cần phải làm cho hình ảnh này kéo dài đến kích thước tối đa có thể mà không làm tràn nó <div>hoặc làm lệch hình ảnh.

Tôi không thể dự đoán tỷ lệ khung hình của hình ảnh, vì vậy không có cách nào để biết có nên sử dụng hay không:

<img src="url" style="width: 100%;">

hoặc là

<img src="url" style="height: 100%;">

Tôi không thể sử dụng cả hai (tức là style = "width: 100%; height: 100%;") vì điều đó sẽ kéo dài hình ảnh để phù hợp với <div>.

Có <div>kích thước được đặt theo tỷ lệ phần trăm của màn hình, điều này cũng không thể đoán trước.

Cập nhật 2016:

Trình duyệt hiện đại hoạt động tốt hơn nhiều. Tất cả những gì bạn cần làm là đặt chiều rộng hình ảnh thành 100% ( bản demo )

.container img {
   width: 100%;
}

Vì bạn không biết tỷ lệ khung hình, bạn sẽ phải sử dụng một số tập lệnh. Đây là cách tôi sẽ làm với jQuery ( bản demo ):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

Kịch bản

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

Có một cách dễ dàng hơn nhiều để làm điều này chỉ bằng cách sử dụng CSSvà HTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Điều này sẽ đặt hình ảnh của bạn làm nền, và kéo dài nó để phù hợp với divkích thước mà không bị biến dạng.

Không phải là một giải pháp hoàn hảo, nhưng CSS này có thể giúp ích. Thu phóng là những gì làm cho mã này hoạt động và về mặt lý thuyết là vô hạn để hoạt động lý tưởng cho các hình ảnh nhỏ - nhưng 2, 4 hoặc 8 hoạt động tốt trong hầu hết các trường hợp.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

Nếu bạn có thể, sử dụng hình ảnh nền và thiết lập background-size: cover. Điều này sẽ làm cho nền bao gồm toàn bộ yếu tố.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Nếu bạn bị mắc kẹt với việc sử dụng hình ảnh nội tuyến, có một vài lựa chọn. Đầu tiên, có

phù hợp với đối tượng

Thuộc tính này hoạt động trên hình ảnh, video và các đối tượng khác tương tự background-size: cover.

CSS

img {
  object-fit: cover;
}

Đáng buồn thay, hỗ trợ trình duyệt không tốt lắm với IE lên đến phiên bản 11 hoàn toàn không hỗ trợ. Tùy chọn tiếp theo sử dụng jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Plugin jQuery tùy chỉnh

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Sử dụng plugin như thế này

jQuery('.cover-image').coverImage();

Nó sẽ lấy một hình ảnh, đặt nó làm hình nền trên thành phần trình bao bọc của hình ảnh và xóa imgthẻ khỏi tài liệu. Cuối cùng, bạn có thể sử dụng

CSS thuần

Bạn có thể sử dụng điều này như một dự phòng. Hình ảnh sẽ được phóng to lên để che đi phần chứa của nó nhưng nó sẽ không giảm xuống.

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hy vọng điều này có thể giúp ai đó, hạnh phúc mã hóa!

Cảm ơn CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE và EDGE như mọi người ngoài cuộc: http://caniuse.com/#feat=object-fit

Cập nhật 2019.

Bây giờ bạn có thể sử dụng thuộc tính object-fitcss chấp nhận các giá trị sau:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Ví dụ, bạn có thể có một thùng chứa hình ảnh.

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

Điều đó là không thể chỉ với HTML và CSS, hoặc ít nhất là cực kỳ kỳ lạ và phức tạp. Nếu bạn sẵn sàng ném một số javascript vào, đây là một giải pháp sử dụng jQuery:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Điều đó sẽ thay đổi kích thước hình ảnh để nó luôn phù hợp với phần tử cha, bất kể kích thước của nó. Và khi nó liên kết với$(window).resize() sự kiện, khi người dùng thay đổi kích thước cửa sổ, hình ảnh sẽ điều chỉnh.

Điều này không cố gắng tập trung vào hình ảnh trong thùng chứa, điều đó là có thể nhưng tôi đoán đó không phải là những gì bạn đang theo đuổi.

Đặt chiều rộng và chiều cao của containerdiv ngoài . Sau đó sử dụng kiểu dáng bên dưới trên img:

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

Điều này sẽ giúp bạn giữ tỷ lệ khung hình của img

Nếu bạn muốn đặt chiều rộng hoặc chiều cao tối đa (để nó sẽ không quá lớn) trong khi vẫn giữ tỷ lệ khung hình của hình ảnh, bạn có thể làm điều này:

img{
   object-fit: contain;
   max-height: 70px;
}

Tôi bắt gặp câu hỏi này để tìm kiếm một vấn đề tương tự. Tôi đang tạo một trang web với thiết kế đáp ứng và độ rộng của các thành phần được đặt trên trang được đặt thành phần trăm của chiều rộng màn hình. Chiều cao được đặt với giá trị vw.

Vì tôi đang thêm các bài đăng với PHP và một phụ trợ cơ sở dữ liệu, CSS thuần túy không còn là vấn đề nữa. Tuy nhiên, tôi đã tìm thấy giải pháp jQuery / javascript hơi rắc rối, vì vậy tôi đã đưa ra một giải pháp gọn gàng (vì vậy tôi nghĩ rằng bản thân mình ít nhất).

HTML (hoặc php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

Bằng cách sử dụng style = "" có thể cập nhật PHP trang của tôi một cách linh hoạt và kiểu CSS cùng với style = "" sẽ kết thúc thành một hình ảnh được che phủ hoàn hảo, được thu nhỏ để che thẻ div động.

Bạn có thể dùng object-fit: cover; trên div cha.

https://css-tricks.com/almanac/properIES/o/object-fit/

Để làm cho hình ảnh này kéo dài đến kích thước tối đa có thể mà không bị tràn hoặc làm lệch hình ảnh.

Ứng dụng...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

phong cách cho hình ảnh.

Sử dụng phương pháp này, bạn có thể điền vào div của mình với tỷ lệ thay đổi hình ảnh của div và hình ảnh.

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

Điều này đã lừa tôi

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

nếu bạn làm việc với thẻ IMG, thật dễ dàng.

Toi lam cai nay:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

nhưng tôi đã không tìm thấy cách làm cho nó hoạt động với #pic {nền: url (img / menu.png)} Enyone? Cảm ơn

Tôi đã có vấn đề tương tự. Tôi đã giải quyết nó chỉ bằng CSS .

Về cơ bản Object-fit: cover giúp bạn đạt được nhiệm vụ duy trì tỷ lệ khung hình trong khi định vị hình ảnh bên trong div.

Nhưng vấn đề là Object-fit: cover không hoạt động trong IE và nó đã chiếm 100% chiều rộng và 100% chiều cao và tỷ lệ khung hình bị biến dạng. Nói cách khác, hiệu ứng thu phóng hình ảnh không phải là thứ tôi nhìn thấy trong chrome.

Cách tiếp cận tôi thực hiện là định vị hình ảnh bên trong thùng chứa một cách tuyệt đối và sau đó đặt nó ngay tại trung tâm bằng cách sử dụng kết hợp:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Khi nó ở giữa, tôi đưa ra hình ảnh,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Điều này làm cho hình ảnh có được hiệu ứng của Object-fit: cover.

Dưới đây là một minh chứng về logic trên.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Logic này hoạt động trong tất cả các trình duyệt.

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

Câu đố

... Và nếu bạn muốn đặt hoặc thay đổi hình ảnh (sử dụng #foo làm ví dụ):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

Nhiều giải pháp được tìm thấy ở đây có một số hạn chế: một số giải pháp không hoạt động trong IE (phù hợp với đối tượng) hoặc các trình duyệt cũ hơn, các giải pháp khác không mở rộng hình ảnh (chỉ thu nhỏ nó), nhiều giải pháp không hỗ trợ thay đổi kích thước cửa sổ và nhiều giải pháp là không chung chung, hoặc mong đợi độ phân giải sửa chữa hoặc bố cục (dọc hoặc ngang)

Nếu sử dụng javascript và jquery không phải là vấn đề, tôi có giải pháp này dựa trên mã của @Tatu Ulmanen. Tôi đã sửa một số vấn đề và thêm một số mã trong trường hợp hình ảnh được tải một cách tự nhiên và không có sẵn khi bắt đầu. Về cơ bản, ý tưởng là có hai quy tắc css khác nhau và áp dụng chúng khi được yêu cầu: một khi giới hạn là chiều cao, vì vậy chúng ta cần hiển thị các thanh màu đen ở hai bên và quy tắc css khi giới hạn là chiều rộng, vì vậy chúng ta cần phải hiển thị các thanh màu đen ở trên cùng / dưới cùng.

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

Đối với một phần tử HTML như:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>