CSS memaksa ukuran gambar dan menjaga rasio aspek


577

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.

Jawaban:


775

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


11
Apakah ada versi ini yang akan memperbesar gambar agar sesuai dengan wadah mereka juga? Saya sudah mencoba max-width / max-height sebagai angka dengan lebar / tinggi sebagai otomatis, tetapi seperti kata setec di atas, itu tidak akan memperbesar gambar. Saya sudah mencoba menggunakan min-width / min-height juga. Saya hanya tidak bisa mendapatkan kombinasi yang tepat. Saya hanya ingin gambar apa pun yang saya masukkan ke dalam wadah ini, itu akan ditampilkan pada ukuran maksimum yang dimungkinkan tanpa mengubah rasio aspek terlepas dari apakah itu melibatkan penyusutan atau pertumbuhan gambar untuk mencapai itu.
Dee2000

7
Tampaknya tampilan: blok tidak lagi diperlukan.
actimel

3
Perhatikan bahwa pertanyaannya adalah tentang <img>itu sendiri yang mencakup lebar dan tinggi dan saya pikir itu berarti Anda perlu menggunakan !importantuntuk menghindari info lebar / tinggi tag.
Alexis Wilke

18
@AlexisWilke aturan CSS mengesampingkan atribut html. !importanttidak dibutuhkan.
Jargs

5
Menggunakannya di Chrome, tidak bekerja untuk saya, bahkan dengan! Penting
Ray

266

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.


44
object-fitis fantastic, great tip! Ada beberapa perpustakaan polyfill baik jika ada yang bertanya-tanya tentang kompatibilitas IE.
lembut

7
Indah, ingatlah ini tidak bekerja untuk IE meskipun
guival

1
Tidak layak pada WebApps Display Signage SAMSUNG.
Mär

3
Solusi terbaik yang tersedia
Cynthia Sanchez

10
Anda juga dapat menggunakan object-fit: containdan menentukan lebar atau tinggi!
Broper

236

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


1
Ini berfungsi, tetapi harus max-width: 100% daripada lebar di sebagian besar penggunaan.
Dudeist

Saya pikir tidak !importantdiperlukan di sini.
Flimm

1
Dengan orang tua diatur ke 100px. Bagaimana ini akan bekerja secara responsif?
Remi

@Remi itu untuk tujuan demonstrasi. Saya telah menambahkan klarifikasi ke bagian atas jawaban.
Aternus

@Flimm sebelumnya digunakan untuk masalah kompatibilitas, pada 2016 ini tidak lagi diperlukan.
Aternus

64

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')";

2
akhirnya solusi CSS saja untuk memaksimalkan gambar sambil menjaga rasio aspeknya, terima kasih. Beruntung bahwa IE sebelum 9 semakin tidak penting.
humanityANDpeace

2
Solusi hebat, terima kasih! Perhatikan juga bahwa Anda dapat mengganti 'isi' dengan 'sampul' jika Anda ingin mengisi div sepenuhnya dan memotong piksel tambahan yang tidak sesuai dengan rasio
mbritto

Ini seharusnya jawaban yang benar. Saya suka solusi ini. Itu menjaga proporsi Anda dan mudah dimengerti.
skolind

1
Meskipun ini adalah jawaban yang benar secara pemrograman, jika sebuah gambar "penting" dengan cara ini Anda tidak memiliki atribut img sehingga Anda membunuh SEO.
fat_mike

Bagus! Ini adalah satu-satunya solusi yang bekerja untuk gambar potret dan lansekap serta wadah potret dan lansekap gambar (misalnya beragam tergantung pada ukuran jendela) di semua 4 kombinasi dan juga di IE11, yang tampaknya cukup sebuah persyaratan. Terima kasih!
cupiqi09

53

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

object-fitberfungsi untuk saya apakah itu berfungsi di semua browser?
Murtuza Zabuawala

Apakah .imgkelas pada orang tua atau gambar? Bisakah Anda membuat jsfiddle dengan contoh untuk gambar potret dan lanskap?
Desain oleh Adrian

19

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;"/>

saya tidak bisa melakukannya untuk semua gambar - ada banyak gambar yang sudah ditempatkan di banyak file html
moonvader

2
Baik. coba img {max-width: 500px; tinggi: otomatis; maks-tinggi: 600px;}
el Dude

1
Informasi yang berguna seperti komentar itu harus ditambahkan ke posting Anda. Dengan begitu kita bisa segera melihat apa yang telah Anda buat.
Bram Vanroy

2
Kelemahan dari menghilangkan heightatribut di imgtag adalah bahwa browser tidak dapat menghitung berapa banyak ruang yang akan diambil gambar sebelum mengunduh gambar. Ini membuat halaman lebih lambat untuk di-render dan itu bisa menyebabkan lebih banyak "melompat".
Flimm

11

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

2
Ini adalah jawaban yang sama dengan jawaban setec , kecuali menggunakan 100%bukannya nilai piksel tertentu.
Flimm

5
display: block;tidak perlu.
Flimm

Itu sempurna dan berfungsi dengan gambar dengan ukuran dan proporsi berapapun
Le Droid

8

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 .


terima kasih ini berfungsi dalam versi modern yaitu IE, Opera, FF dan Chrome. saya perlu waktu untuk mengujinya dengan browser lain.
moonvader

7
Jangan gunakan !importantdalam CSS. Ini adalah retasan yang pada akhirnya akan kembali menghantui Anda.
Otomatis

1
Anda bahkan tidak perlu di !importantsini.
Flimm

8

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.


5

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

5

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.


Saya suka ini karena berfungsi dengan lingkaran / border-radius. Tapi sayangnya, itu memotong gambar dan tidak melakukannya dengan baik dengan membuat perbatasan untuk gambar di div sejauh yang saya coba.
Jake

4

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">


4

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


Ini tidak berfungsi jika "tinggi dan lebar sudah ditentukan" seperti pertanyaan awal. Ada saat-saat Anda ingin memaksakan lebar dan tinggi lalu memperbesar / memperkecil gambar sesuai dengan aspek rasio.
Disain oleh Adrian

3

Anda bisa menggunakan ini:

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

2

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

Ini akan meregangkan div ke lebar 100% dari induknya, tetapi tidak mempertahankan rasio aspek gambar.
David Ball

Apakah kamu sudah mencobanya? Saya berhasil jsfiddle.net/zuysj22w . Bisakah Anda menunjukkan kasus Anda? @ DavidvidBall
Chun Yang

Ini adalah solusi yang mirip dengan jawaban Hoffmann .
Flimm

2

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

1

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.


Meskipun posting pertanyaan tidak menguraikannya, saya pikir OP sangat menyiratkan dia sedang mencari solusi hanya CSS.
Flimm

0

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">


0

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

0

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.


-1

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

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

1
Bisakah Anda jelaskan secara singkat mengapa solusi ini membantu? (Hanya satu kalimat sudah cukup.)
Aenadon

Hanya karena gambar akan menjaga aspek rasio, sementara max-width dan max-height akan mencegahnya menjadi lebih besar dari wadah
Uknow
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.