Ubah skala gambar agar pas dengan kotak pembatas

Apakah ada solusi khusus css untuk menskalakan gambar ke dalam kotak pembatas (menjaga rasio aspek)? Ini berfungsi jika gambar lebih besar dari penampung:

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

Contoh:

• Use case 1 (bekerja): http://jsfiddle.net/Jp5AQ/2/
• Use case 2 (bekerja): http://jsfiddle.net/Jp5AQ/3/

Tapi saya ingin memperbesar gambar sampai dimensinya 100% dari container.

• Use case 3 (tidak berfungsi): http://jsfiddle.net/Jp5AQ/4/

Catatan: Meskipun ini adalah jawaban yang diterima, jawaban di bawah ini lebih akurat dan saat ini didukung di semua browser jika Anda memiliki opsi untuk menggunakan gambar latar belakang.

Tidak, tidak ada satu-satunya cara CSS untuk melakukan ini di kedua arah. Anda bisa menambahkan

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

Untuk elemen agar selalu memiliki lebar 100% dan secara otomatis menskalakan tinggi ke rasio aspek, atau kebalikannya:

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

untuk selalu menskalakan ke tinggi maksimum dan lebar relatif. Untuk melakukan keduanya, Anda perlu menentukan apakah rasio aspek lebih tinggi atau lebih rendah dari penampungnya, dan CSS tidak dapat melakukan ini.

Alasannya adalah CSS tidak tahu seperti apa halaman tersebut. Ini menetapkan aturan sebelumnya, tetapi hanya setelah itu elemen-elemen itu dirender dan Anda tahu persis ukuran dan rasio apa yang Anda hadapi. Satu-satunya cara untuk mendeteksinya adalah dengan JavaScript.

Meskipun Anda tidak mencari solusi JS, saya akan tetap menambahkannya jika seseorang mungkin membutuhkannya. Cara termudah untuk menangani ini dengan JavaScript adalah menambahkan kelas berdasarkan perbedaan rasio. Jika rasio lebar-tinggi kotak lebih besar dari gambar, tambahkan kelas "fillwidth", jika tidak tambahkan kelas "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>

Berkat CSS3, ada solusinya!

Solusinya adalah dengan menempatkan gambar sebagai background-imagedan kemudian mengatur background-sizeke contain.

HTML

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

CSS

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

Uji di sini: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Kompatibilitas penuh dengan browser terbaru: http://caniuse.com/background-img-opts

Untuk menyelaraskan div di tengah, Anda dapat menggunakan variasi ini:

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

Inilah solusi hackish yang saya temukan:

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

Ini akan memperbesar gambar sepuluh kali lipat, tetapi membatasinya hingga 10% dari ukuran akhirnya - sehingga membatasinya ke container.

Berbeda dengan background-imagesolusinya, ini juga akan bekerja dengan <video>elemen.

Contoh interaktif:

 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>

Hari ini, katakan saja object-fit: contain. Dukungan adalah segalanya kecuali 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;*/
}

Anda dapat melakukannya dengan CSS murni dan dukungan browser lengkap, baik untuk gambar dengan panjang vertikal maupun horizontal secara bersamaan.

Berikut cuplikan yang berfungsi di Chrome, Firefox, dan Safari (keduanya menggunakan object-fit: scale-down, dan tanpa menggunakannya):

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>

Solusi lain tanpa gambar latar belakang dan tanpa memerlukan wadah (meskipun ukuran maksimal kotak pembatas harus diketahui):

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

Untuk ini, Anda akan memiliki sesuatu seperti:

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

Contoh ini untuk meregangkan gambar secara proporsional agar sesuai dengan seluruh jendela. Sebuah improvisasi ke kode yang benar di atas adalah menambahkan$( 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();
});

Ada dua kondisi if. Yang pertama terus memeriksa apakah tinggi gambar kurang dari div dan menerapkan .fillheightkelas sementara yang berikutnya memeriksa lebar dan menerapkan .fillwidthkelas. Dalam kedua kasus, kelas lain dihapus menggunakan.removeClass()

Ini CSS nya

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

Anda dapat mengganti 100vhdengan 100%jika Anda ingin meregangkan gambar dengan dalam sebuah div. Contoh ini untuk meregangkan gambar secara proporsional agar sesuai dengan seluruh jendela.

Apakah Anda ingin meningkatkan skala tetapi tidak ke bawah?

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

Namun, ini tidak mengunci rasio aspek.

Saya telah menggunakan tabel untuk memusatkan gambar di dalam kotak. Itu menjaga rasio aspek dan menskalakan gambar dengan cara yang benar-benar ada di dalam kotak. Jika gambar lebih kecil dari kotak, maka gambar akan ditampilkan seperti di tengah. Kode di bawah ini menggunakan kotak lebar 40px dan tinggi 40px. (Tidak begitu yakin seberapa baik kerjanya karena saya menghapusnya dari kode lain yang lebih kompleks dan menyederhanakannya sedikit)

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>

Cara terbersih dan termudah untuk melakukan ini:

Pertama beberapa 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>

Ini seharusnya berhasil!

Ini membantu saya:

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

Kemudian pada elemen (Anda dapat menggunakan javascript atau kueri media untuk menambahkan daya tanggap):

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

Semoga ini membantu!

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

Saya mengedit jawaban saya untuk menjelaskan lebih lanjut soluton saya karena saya mendapat suara negatif.

Dengan gaya yang diatur seperti yang ditunjukkan di atas dalam css, sekarang div html berikut akan menunjukkan gambar selalu pas dengan lebar dan akan menyesuaikan rasio tinggi lebar ke lebar. Dengan demikian gambar akan diskalakan agar sesuai dengan kotak pembatas seperti yang ditanyakan dalam pertanyaan.

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