Chia tỷ lệ hình ảnh để vừa với một khung giới hạn

Có một giải pháp chỉ css để chia tỷ lệ hình ảnh vào một khung giới hạn (giữ tỷ lệ khung hình) không? Điều này hoạt động nếu hình ảnh lớn hơn container:

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

Thí dụ:

• Trường hợp sử dụng 1 (tác phẩm): http://jsfiddle.net/Jp5AQ/2/
• Trường hợp sử dụng 2 (tác phẩm): http://jsfiddle.net/Jp5AQ/3/

Nhưng tôi muốn mở rộng hình ảnh cho đến khi kích thước là 100% của container.

• Trường hợp sử dụng 3 (không hoạt động): http://jsfiddle.net/Jp5AQ/4/

Lưu ý: Mặc dù đây là câu trả lời được chấp nhận, câu trả lời dưới đây chính xác hơn và hiện được hỗ trợ trong tất cả các trình duyệt nếu bạn có tùy chọn sử dụng hình nền.

Không, không có cách duy nhất CSS để làm điều này theo cả hai hướng. Bạn có thể thêm

.fillwidth {
    min-width: 100%;
    height: auto;
}

Để phần tử luôn có chiều rộng 100% và tự động chia tỷ lệ chiều cao theo tỷ lệ khung hình hoặc tỷ lệ nghịch:

.fillheight {
    min-height: 100%; 
    width: auto;
}

để luôn luôn tỷ lệ đến chiều cao tối đa và chiều rộng tương đối. Để làm cả hai, bạn sẽ cần xác định xem tỷ lệ khung hình cao hơn hoặc thấp hơn so với vùng chứa của nó và CSS không thể làm điều này.

Lý do là CSS không biết trang trông như thế nào. Nó đặt ra các quy tắc trước, nhưng chỉ sau đó, các phần tử sẽ được hiển thị và bạn biết chính xác kích thước và tỷ lệ bạn đang xử lý. Cách duy nhất để phát hiện đó là với JavaScript.

Mặc dù bạn không tìm kiếm một giải pháp JS nào nhưng tôi sẽ thêm một giải pháp nếu có ai đó cần nó. Cách dễ nhất để xử lý việc này với JavaScript là thêm một lớp dựa trên sự khác biệt về tỷ lệ. Nếu tỷ lệ giữa chiều rộng và chiều cao của hộp lớn hơn tỷ lệ của hình ảnh, hãy thêm lớp "băng thông", nếu không thì thêm lớp "fillheight".

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

Nhờ CSS3 có một giải pháp!

Giải pháp là để đưa hình ảnh như background-imagevà sau đó đặt background-sizeđể contain.

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Kiểm tra nó ở đây: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Tương thích hoàn toàn với các trình duyệt mới nhất: http://caniuse.com/background-img-opts

Để căn chỉnh div ở trung tâm, bạn có thể sử dụng biến thể này:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Đây là một giải pháp hackish tôi phát hiện ra:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

Điều này sẽ phóng to hình ảnh lên gấp 10 lần, nhưng giới hạn ở mức 10% kích thước cuối cùng của nó - do đó ràng buộc nó với vật chứa.

Không giống như background-imagegiải pháp, điều này cũng sẽ làm việc với <video>các yếu tố.

Ví dụ tương tác:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

Hôm nay, chỉ cần nói đối tượng phù hợp: chứa. Hỗ trợ là tất cả mọi thứ trừ IE: http://caniuse.com/#feat=object-fit

html:

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

css:

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Bạn có thể thực hiện điều này với CSS thuần túy và hỗ trợ trình duyệt hoàn chỉnh, cho cả hình ảnh dài và chiều ngang cùng một lúc.

Đây là một đoạn hoạt động trong Chrome, Firefox và Safari (cả sử dụng object-fit: scale-downvà không sử dụng nó):

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Một giải pháp khác không có ảnh nền và không cần thùng chứa (mặc dù phải biết kích thước tối đa của hộp giới hạn):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

Đối với điều này, bạn sẽ có một cái gì đó như:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

Ví dụ này để kéo dài hình ảnh theo tỷ lệ để phù hợp với toàn bộ cửa sổ. Một ngẫu hứng cho mã chính xác ở trên là thêm$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

Có hai nếu điều kiện. Cái đầu tiên tiếp tục kiểm tra xem chiều cao hình ảnh có nhỏ hơn div hay không và áp dụng .fillheightlớp trong khi lớp tiếp theo kiểm tra độ rộng và .fillwidthlớp áp dụng . Trong cả hai trường hợp, lớp khác được loại bỏ bằng cách sử dụng.removeClass()

Đây là CSS

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Bạn có thể thay thế 100vhbằng 100%nếu bạn muốn kéo dài hình ảnh trong một div. Ví dụ này để kéo dài hình ảnh theo tỷ lệ để phù hợp với toàn bộ cửa sổ.

Bạn đang tìm cách để tăng quy mô lên nhưng không xuống?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

Điều này tuy nhiên, không khóa tỷ lệ khung hình.

Tôi đã sử dụng bảng để trung tâm hình ảnh bên trong hộp. Nó giữ tỷ lệ khung hình và chia tỷ lệ hình ảnh theo cách hoàn toàn bên trong hộp. Nếu hình ảnh nhỏ hơn hộp thì nó được hiển thị như ở giữa. Mã bên dưới sử dụng chiều rộng 40px và hộp chiều cao 40px. (Không hoàn toàn chắc chắn nó hoạt động tốt như thế nào vì tôi đã xóa nó khỏi một mã phức tạp khác và đơn giản hóa nó một chút)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Cách sạch nhất và đơn giản nhất để làm điều này:

Đầu tiên một số CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

Cái này cần phải dùng mẹo!

Điều này đã giúp tôi:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

Sau đó, trên phần tử (bạn có thể sử dụng javascript hoặc truy vấn phương tiện để thêm khả năng phản hồi):

<div class='img-class' style='transform: scale(X);'></div>

Hi vọng điêu nay co ich!

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

Tôi đang chỉnh sửa câu trả lời của mình để giải thích thêm về soluton của mình khi tôi đã bỏ phiếu.

Với các kiểu được đặt như được hiển thị ở trên trong css, bây giờ div html sau sẽ hiển thị hình ảnh luôn phù hợp với chiều rộng và sẽ điều chỉnh tỷ lệ khung hình cao theo chiều rộng. Do đó, hình ảnh sẽ chia tỷ lệ để vừa với một khung giới hạn như được hỏi trong câu hỏi.

<div class="boundingbox"><img src="image.jpg"/></div>