Saya bekerja dengan gambar, dan saya menemukan masalah dengan rasio aspek.

<img src="big_image.jpg" width="900" height="600" alt="" />

Seperti yang Anda lihat, heightdan widthsudah ditentukan. Saya menambahkan aturan CSS untuk gambar:

img {
  max-width:500px;
}

Tetapi untuk big_image.jpg, saya menerima width=500dan height=600. Bagaimana saya bisa mengatur ukuran gambar menjadi kembali, sambil menjaga rasio aspek mereka.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Ini akan membuat gambar menyusut jika terlalu besar untuk area yang ditentukan (karena downside, itu tidak akan memperbesar gambar).

Saya telah bergumul dengan masalah ini cukup sulit, dan akhirnya sampai pada solusi sederhana ini:

object-fit: cover;
width: 100%;
height: 250px;

Anda dapat menyesuaikan lebar dan tinggi agar sesuai dengan kebutuhan Anda, dan properti objek-fit akan melakukan cropping untuk Anda.

Bersulang.

Solusi di bawah ini akan memungkinkan penaikan dan penskalaan gambar , tergantung pada lebar kotak induk.

Semua gambar memiliki wadah induk dengan lebar tetap untuk tujuan demonstrasi saja . Dalam produksi, ini akan menjadi lebar kotak induk.

Praktik Terbaik (2018):

Solusi ini memberi tahu peramban untuk membuat gambar dengan lebar maksimum yang tersedia dan menyesuaikan tinggi sebagai persentase dari lebar itu.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Solusi yang lebih menarik:

Dengan solusi yang lebih bagus, Anda dapat memotong gambar terlepas dari ukurannya dan menambahkan warna latar belakang untuk mengimbangi pemangkasan.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Untuk garis yang menentukan padding, Anda perlu menghitung rasio aspek gambar, misalnya:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Jadi, top padding = 34,37%.

Properti ukuran latar belakang yaitu> = 9 saja, tetapi jika itu tidak masalah bagi Anda, Anda dapat menggunakan div dengan background-imagedan mengatur background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Sekarang Anda hanya dapat mengatur ukuran div Anda ke apa pun yang Anda inginkan dan tidak hanya akan menjaga rasio aspek gambarnya, tetapi juga akan terpusat baik secara vertikal dan horizontal dalam div. Hanya saja, jangan lupa untuk mengatur ukuran pada css karena divs tidak memiliki atribut width / height pada tag itu sendiri.

Pendekatan ini berbeda dari jawaban setecs, menggunakan ini area gambar akan konstan dan ditentukan oleh Anda (meninggalkan ruang kosong baik secara horizontal atau vertikal tergantung pada ukuran div dan rasio aspek gambar), sedangkan jawaban setecs akan memberi Anda sebuah kotak yang persis seperti ukuran gambar yang diskalakan (tanpa spasi kosong).

Sunting: Menurut dokumentasi ukuran latar belakang MDN Anda dapat mensimulasikan properti ukuran latar belakang di IE8 menggunakan deklarasi filter berpemilik:

Meskipun Internet Explorer 8 tidak mendukung properti ukuran latar belakang, dimungkinkan untuk meniru beberapa fungsinya menggunakan fungsi non-standar-ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Sangat mirip dengan beberapa jawaban di sini, tetapi dalam kasus saya, saya memiliki gambar yang kadang lebih tinggi, kadang lebih besar.

Gaya ini bekerja seperti pesona untuk memastikan bahwa semua gambar menggunakan semua ruang yang tersedia, menjaga rasio dan tidak memotong:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Hapus properti "height".

<img src="big_image.jpg" width="900" alt=""/>

Dengan menentukan keduanya Anda mengubah rasio aspek gambar. Pengaturan saja akan mengubah ukuran tetapi mempertahankan rasio aspek.

Secara opsional, untuk membatasi oversizings:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Cukup tambahkan ini ke css Anda, Ini akan secara otomatis menyusut dan berkembang dengan menjaga rasio asli.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Tidak ada cara standar untuk mempertahankan rasio aspek untuk gambar dengan width, heightdan max-widthditentukan bersama.

Jadi kami terpaksa menentukan widthdan heightmencegah "lompatan" halaman saat memuat gambar, atau menggunakan max-widthdan tidak menentukan dimensi untuk gambar.

Menentukan hanya width(tanpa height) biasanya tidak masuk akal, tetapi Anda dapat mencoba untuk menimpa heightatribut HTML dengan menambahkan aturan seperti IMG {height: auto; }pada stylesheet Anda.

Lihat juga bug Firefox 392261 yang terkait .

Ini solusinya:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Ini akan memastikan gambar selalu mencakup seluruh induk (penskalaan ke atas dan ke atas) dan menjaga rasio aspek yang sama.

Setel kelas CSS tag wadah gambar Anda ke image-class:

<div class="image-full"></div>

dan tambahkan ini Anda stylesheet CSS Anda.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Untuk mempertahankan gambar responsif sambil tetap memaksakan gambar untuk memiliki rasio aspek tertentu Anda dapat melakukan hal berikut:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Dan SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Ini dapat digunakan untuk menegakkan rasio aspek tertentu, terlepas dari ukuran gambar yang diunggah penulis.

Terima kasih kepada @Kseso di http://codepen.io/Kseso/pen/bfdhg . Periksa URL ini untuk mengetahui lebih banyak rasio dan contoh yang berfungsi.

Untuk memaksa gambar yang pas dengan ukuran yang tepat, Anda tidak perlu menulis terlalu banyak kode. Ini sangat mudah

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Berikut adalah jawabannya jika Anda ingin menempatkan gambar dengan persentase lebar tetap , tetapi piksel tidak tetap lebar .

Dan ini akan berguna ketika berhadapan dengan ukuran layar yang berbeda .

Triknya adalah

1. Menggunakan padding-topuntuk mengatur ketinggian dari lebar.
2. Menggunakan position: absoluteuntuk menempatkan gambar di ruang padding.
3. Menggunakan max-height and max-widthuntuk memastikan gambar tidak melebihi elemen induk.
4. gunakan display:block and margin: autountuk memusatkan gambar.

Saya juga berkomentar sebagian besar trik di dalam biola.

Saya juga menemukan beberapa cara lain untuk mewujudkan hal ini. Tidak akan ada gambar nyata di html, jadi saya pribadi memberikan jawaban atas ketika saya membutuhkan elemen "img" di html.

css sederhana dengan menggunakan latar belakang http://jsfiddle.net/4660s79h/2/

background-image dengan kata di atas http://jsfiddle.net/4660s79h/1/

konsep untuk menggunakan posisi absolut adalah dari sini http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Anda bisa menggunakan ini:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Anda dapat membuat div seperti ini:

<div class="image" style="background-image:url('/to/your/image')"></div>

Dan gunakan css ini untuk mengubahnya:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Saya akan menyarankan untuk pendekatan responsif praktik terbaik akan menggunakan unit Viewport dan atribut min / max sebagai berikut:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Ini akan membuat gambar menyusut jika terlalu besar untuk area yang ditentukan (karena downside, itu tidak akan memperbesar gambar).

Solusi oleh setec baik untuk "Shrink to Fit" dalam mode otomatis. Tetapi, untuk secara optimal BUKA agar sesuai dengan mode 'otomatis', Anda harus terlebih dahulu memasukkan gambar yang diterima ke dalam temp temp, Periksa apakah dapat diperluas tinggi atau lebar (tergantung pada rasio aspeknya v / s rasio aspek dari blok tampilan Anda),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Pendekatan ini berguna ketika gambar yang diterima lebih kecil dari kotak tampilan. Anda harus menyimpannya di server Anda dalam ukuran Asli Kecil daripada versi yang diperluas untuk mengisi Kotak tampilan Anda yang lebih besar untuk menghemat ukuran dan bandwidth.

Bagaimana kalau menggunakan elemen pseudo untuk penyelarasan vertikal? Kode yang lebih sedikit ini untuk korsel, tetapi saya kira itu berfungsi pada setiap kontainer ukuran tetap. Ini akan menjaga aspek rasio dan memasukkan bar abu-abu-gelap di atas / bawah atau kiri / tulis untuk dimensi terpendek. Sementara itu gambar dipusatkan secara horizontal oleh teks-align dan secara vertikal oleh elemen pseudo.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Presentasi layar penuh:

img[data-attribute] {height: 100vh;}

Ingatlah bahwa jika tinggi view-port lebih besar dari gambar, gambar akan secara alami menurun relatif terhadap perbedaan.

Saya pikir, pada akhirnya ini adalah solusi terbaik, mudah dan sederhana :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}