Cara mempertahankan rasio aspek menggunakan tag IMG HTML

132

Saya menggunakan tag img HTML untuk menampilkan foto di aplikasi kami. Saya telah menetapkan atribut tinggi dan lebarnya menjadi 64. Saya harus menunjukkan resolusi gambar apa pun (misalnya 256x256, 1024x768, 500x400, 205x246, dll.) Sebagai 64x64. Tetapi dengan mengatur atribut tinggi dan lebar dari tag img ke 64, itu tidak mempertahankan rasio aspek, sehingga gambar terlihat terdistorsi.

Untuk referensi Anda, kode persis saya adalah:

<img src="Runtime Path to photo" border="1" height="64" width="64">
html css sunil kumar
sumber
kemungkinan duplikat dari HTML / IE: stretch image agar pas, pertahankan rasio aspek
Jonathon Reinhart
Chridam, Sudah lama ketika saya mengajukan pertanyaan ini. Saya telah meninggalkan perusahaan tempat saya bekerja untuk masalah ini. Saya tidak dapat mencoba solusi yang disarankan karena saya sedang mengerjakan prioritas lain untuk memenuhi tenggat waktu saat itu. Saya tidak bisa mendapatkan kesempatan untuk membuat kemajuan lebih lanjut.
sunil kumar

Jawaban:

134

Jangan atur tinggi DAN lebar. Gunakan satu atau yang lain dan rasio aspek yang benar akan dipertahankan.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />
Luaskan cuplikan

Lobak
sumber
14
... tetapi bagaimana jika Anda ingin memperbaiki tinggi dan lebar?
fatuhoku
7
Ini tidak masuk akal untuk aplikasi dinamis. Tidak diketahui apakah lebar atau tinggi akan berada di 64px, karena tergantung pada rasio gambar. Mengapa ini tanggapan yang dibalik?
Koenigsberg
@ Mark Pertanyaan ini adalah tentang lebar tetap dan / atau gambar tinggi. Daya tanggap bukanlah persyaratan dari pertanyaan itu.
Turnip
3
Ukuran adalah tetap, rasio aspek tidak, karena pertanyaan itu secara khusus tentang setiap gambar dari setiap resolusi. Termasuk resolusi yang lebih kecil dari 64x64.
Koenigsberg
66

di sini adalah satu sampel

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>
Luaskan cuplikan

AKHIL P
sumber
8
Hanya sebuah catatan untuk orang yang ingin menggunakan solusi ini: objek-fit tidak didukung dengan sangat baik oleh browser. Itu tidak didukung oleh IE atau Edge sama sekali. Sumber: caniuse.com/#feat=object-fit
Sean Dawson
2
Sekarang didukung di Edge 16+, lihat tabel: w3schools.com/css/css3_object-fit.asp
Eddy R.
44

Atur widthdan heightdari gambar-gambar itu auto, tetapi batasi keduanya max-widthdan max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Biola

Jika Anda ingin menampilkan gambar dengan ukuran sewenang-wenang di "frame" 64x64px, Anda dapat menggunakan pembungkus inline-blok dan memposisikannya, seperti pada biola ini .

Ilya Streltsyn
sumber
3
Tidak akan menskalakan melebihi ukuran asli, hanya di bawah ukuran asli.
Koenigsberg
40 
<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">
Lucio Fonseca
sumber
2
Ini adalah solusi yang tepat karena terus independen dari orientasi gambar. Solusi 3rror404 mengharuskan Anda tahu apakah gambar lebih lebar daripada tinggi atau sebaliknya.
devios1
2
juga diatur widthdan heightke auto.
Mahmoodvcs
Solusi tepat untuk membatasi ketinggian dan lebar.
Pavan Kumar
1
Sebuah gambar akan dibatasi dengan baik oleh ini, tetapi tidak diskalakan melebihi ukuran aslinya. Padahal tidak pasti dari pos pembuka mana dari dua OP yang diinginkan.
Koenigsberg
14

Tak satu pun dari metode yang terdaftar yang menskala gambar ke ukuran terbesar yang mungkin ada dalam sebuah kotak sambil mempertahankan rasio aspek yang diinginkan.

Ini tidak dapat dilakukan dengan tag IMG (setidaknya bukan tanpa sedikit pun JavaScript), tetapi dapat dilakukan sebagai berikut:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
Pengecut Anonim
sumber
2
Iya. Gunakan style="background: url('_'); background-size: cover width:_px height:_px"untuk <img>tag.
Ujjwal Singh
3
Terima kasih, @UjjwalSingh. Memang, kita covertidak perlu containmemaksimalkan ukuran gambar semaksimal mungkin. containmengarah ke "letterboxing".
Ortwin Gentz
4

Gunakan object-fit: containatribut di dalam css html img.

Ankit Kumar Verma
sumber
3

Bungkus gambar divdengan dimensi 64x64 dan atur width: inheritke gambar: 

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>
Konstantin Dinev
sumber
1

Mengapa Anda tidak menggunakan file CSS terpisah untuk mempertahankan tinggi dan lebar gambar yang ingin Anda tampilkan? Dengan cara itu, Anda dapat memberikan lebar dan tinggi tentu.

misalnya: 

       image {
       width: 64px;
       height: 64px;
       }
Sahan De Silva
sumber
1

Coba ini:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

Menambahkan objek-fit = "penutup" akan memaksa gambar untuk mengambil ruang tanpa kehilangan rasio aspek.

Nick friesen
sumber