Pertanyaan CSS memaksa mengubah ukuran gambar dan menjaga aspek rasio


Saya bekerja dengan gambar, dan saya berlari melintasi masalah dengan rasio aspek.

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

Seperti yang Anda lihat, height dan width sudah ditentukan. Saya menambahkan aturan CSS untuk gambar:

img {
  max-width:500px;
}

Tapi untuk big_image.jpg, Saya menerima width=500 dan height=600. Bagaimana saya bisa mengatur gambar agar ukurannya kembali, sambil mempertahankan rasio aspeknya.


356
2017-10-20 18:20


asal


Jawaban:


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 tertentu (sebagai sisi bawah, itu tidak akan memperbesar gambar).


541
2018-06-19 06:08



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

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

Praktik Terbaik (2018):

Solusi ini memberi tahu browser untuk merender 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 Pelamun:

Dengan solusi yang lebih bagus, Anda akan dapat memotong gambar terlepas dari ukurannya dan menambahkan warna latar belakang untuk mengkompensasi 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, padding atas = 34,37%.


142
2018-05-15 10:04



Saya sudah berjuang dengan masalah ini cukup keras, 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 yang sesuai objek akan melakukan pemangkasan untuk Anda.

Tepuk tangan.


104
2017-08-19 12:35



Properti background-size adalah>> = 9 saja, tetapi jika itu baik-baik saja dengan Anda, Anda dapat menggunakan div dengan background-image dan mengatur background-size: contain:

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

Sekarang Anda dapat mengatur ukuran div Anda ke apa pun yang Anda inginkan dan bukan hanya gambar akan mempertahankan rasio aspeknya juga akan terpusat secara vertikal dan horizontal di dalam div. Hanya 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), sementara jawaban setecs akan memberikan Anda sebuah kotak yang persis ukuran gambar yang diskalakan (tanpa spasi kosong).

Edit: Menurut MDN dokumentasi ukuran latar belakang Anda dapat mensimulasikan properti background-size di IE8 menggunakan deklarasi filter proprietary:

Meskipun Internet Explorer 8 tidak mendukung properti ukuran latar belakang, adalah mungkin 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')";

56
2018-05-30 13:47



Hapus properti "tinggi".

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

Dengan menentukan keduanya, Anda mengubah rasio aspek gambar. Hanya pengaturan satu akan mengubah ukuran tetapi mempertahankan aspek rasio.

Opsional, untuk membatasi oversizing:

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

15
2017-10-20 18:30



Sangat mirip dengan beberapa jawaban di sini, tetapi dalam kasus saya, saya memiliki gambar yang kadang-kadang lebih tinggi, kadang-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;
}

13
2017-08-29 18:14



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

9
2018-04-15 10:11



Tidak ada cara standar untuk mempertahankan aspek rasio untuk gambar dengan width, height dan max-width ditentukan bersama.

Jadi kami terpaksa menentukan width dan height untuk mencegah halaman "melompat" saat memuat gambar, atau untuk digunakan max-width dan tidak menentukan dimensi untuk gambar.

Menentukan saja width (tanpa height) biasanya tidak terlalu masuk akal, tetapi Anda dapat mencoba untuk mengganti height HTML-atribut dengan menambahkan aturan suka IMG {height: auto; } ke stylesheet Anda.

Lihat juga Firefox terkait bug 392261.


6
2017-10-20 18:37



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

Inilah jawabannya jika Anda ingin menempatkan gambar persentase tetap lebar, tapi piksel dengan lebar tidak tetap.

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

Triknya

  1. Menggunakan padding-top untuk mengatur tinggi dari lebar.
  2. Menggunakan position: absolute untuk menempatkan gambar di ruang bantalan.
  3. Menggunakan max-height and max-width untuk memastikan gambar tidak akan melewati elemen induk.
  4. menggunakan display:block and margin: auto untuk memusatkan gambar.

Saya juga mengomentari sebagian besar trik di dalam biola.


Saya juga menemukan beberapa cara lain untuk mewujudkannya. Tidak akan ada gambar nyata dalam html, jadi saya secara pribadi perfer jawaban atas ketika saya perlu "img" elemen di html.

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

gambar latar belakang 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


4
2018-02-06 15:46



Setel kelas CSS dari tag penampung 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;
}

3
2017-08-19 20:37



Untuk mempertahankan gambar responsif saat masih menerapkan 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 aspek rasio tertentu, terlepas dari ukuran gambar yang diunggah oleh pengarang.

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


3
2018-03-22 12:39