Penskalaan img HTML

114

Saya mencoba menampilkan beberapa gambar besar dengan tag img HTML. Saat ini mereka keluar dari tepi layar; bagaimana cara mengubah skala agar tetap berada dalam jendela browser?

Atau jika hal ini tidak memungkinkan, apakah mungkin untuk setidaknya mengatakan "tampilkan gambar ini pada 50% dari lebar dan tinggi normalnya"?

Atribut lebar dan tinggi mendistorsi gambar - sejauh yang saya tahu, ini karena mereka mengacu pada atribut apa pun yang mungkin akan dihasilkan wadah, yang tidak akan terkait dengan gambar. Saya tidak dapat menentukan piksel karena saya harus berurusan dengan banyak koleksi gambar, masing-masing dengan ukuran piksel yang berbeda. Lebar maksimal tidak berfungsi.

html image-scaling rwallace.dll
sumber
4
Ingatlah bahwa tidak disarankan untuk mengirim gambar besar dan membuatnya kecil dengan css. Lebih baik memiliki versi berbeda dari gambar yang sama untuk menghemat bandwidth dan membuat halaman lebih responsif (meskipun gambar akan terlihat kecil, gambar lengkap akan dikirim).
Esteban Küber
1
rwallace, apakah Anda menggunakan .net atau PHP atau sesuatu selain HTML murni?
Dorjan
1
Ukuran file gambar tidak masalah, tidak ada persyaratan jika saya ingin menghemat bandwidth. Saya menggunakan PHP, tetapi solusi HTML berfungsi.
rwallace

Jawaban:

135

Hanya setel widthatauheight , dan ini akan menskalakan yang lain secara otomatis. Dan ya, Anda bisa menggunakan persentase.

Bagian pertama bisa dilakukan, tetapi membutuhkan JavaScript, jadi mungkin tidak berfungsi untuk semua pengguna.

RiddlerDev
sumber
7
Harap perhatikan bahwa melakukan ini pada gambar yang sangat besar akan mengakibatkan waktu pengunduhan yang lama untuk halaman yang seharusnya tidak memiliki waktu pengunduhan yang lama. Itu selalu lebih baik untuk benar-benar mengubah ukuran gambar jika memungkinkan.
ceejayoz
Terima kasih! Ternyata solusi Anda hanya mengatur lebar tidak hanya berfungsi untuk penskalaan yang benar, tetapi sebenarnya juga melakukan bagian pertama hanya dengan mengatur lebar menjadi 100%.
rwallace
2
@ceejayoz Saya setuju, tapi bukan itu yang dia tanyakan.
RiddlerDev
@ceejayoz Saya bertanya-tanya, kenapa butuh waktu lebih lama? Bukankah itu harus diubah ukurannya saat menampilkannya untuk kedua situasi? Atau apakah Anda mengatakan mengubah ukuran gambar sebenarnya secara manual dan mengubah file?
Abdul
2
@Abdul Saya mengatakan gambar berukuran 3,000x3,000 piksel 5MB tidak boleh digunakan dalam slot 100x100 piksel di situs web Anda.
ceejayoz
18

css sudah cukup:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
Selvadurai Handeeban
sumber
9

Saya tahu bahwa pertanyaan ini telah lama ditanyakan tetapi untuk hari ini satu jawaban sederhana adalah:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

Penggunaan vw di sini menunjukkan bahwa lebarnya relatif terhadap 55% dari lebar viewport.

Semua browser utama saat ini mendukung ini.

Cek link ini .

Dimitri de Jesus
sumber
1
vwadalah penyelamat bagi saya, metode lain tidak berfungsi untuk gambar yang ada.
karam
6

Tidak diperlukan Javascript.

IE6 Internet Explorer 6

Persen hanya berfungsi untuk lebar elemen, tetapi height:100%; tidak berfungsi tanpa kode yang benar.

CSS

html, body { height:100%; }

Kemudian menggunakan persentase berfungsi dengan baik, dan secara dinamis memperbarui pada pengubahan ukuran jendela.

<img src="image.jpg" style="height:80%;">

Anda tidak memerlukan atribut lebar, lebar akan diskalakan secara proporsional saat ukuran jendela browser diubah.

Dan permata kecil ini, jika gambar diperbesar, itu tidak akan terlihat (terlalu) kuning (itu interpolasi).

img { -ms-interpolation-mode: bicubic; }

Alat peraga pergi ke sumber ini: Cheatsheet IE6 Ultimate: Cara Memperbaiki 25+ Bug Internet Explorer 6

tidak teridentifikasi-1
sumber
6

Menambahkan max-width: 100%;ke imgtag berfungsi untuk saya.

Ralph David Abernathy
sumber
2

Saya pikir solusi terbaik adalah mengubah ukuran gambar melalui skrip atau secara lokal dan mengunggahnya lagi. Ingat, Anda memaksa pemirsa Anda untuk mengunduh file yang lebih besar dari yang mereka butuhkan

riotera
sumber
0

Cara terbaik yang saya tahu bagaimana melakukan ini, adalah:

1) setel overflow untuk menggulir dan dengan begitu gambar akan tetap ada tetapi Anda dapat menggulir untuk melihatnya

2) unggah gambar yang lebih kecil. Sekarang ada banyak program di luar sana saat mengunggah (Anda memerlukan sesuatu seperti PHP atau .net untuk melakukan btw ini), Anda dapat memilikinya secara otomatis.

3) Hidup dengan itu dan pengaturan lebar dan tinggi, ini meskipun akan membuatnya terlihat terdistorsi tetapi ukuran yang tepat akan tetap mengakibatkan pengguna harus mengunduh gambar berukuran penuh.

Semoga berhasil!

Dorjan
sumber