Bagaimana Anda mengubah ukuran gambar yang besar secara otomatis sehingga akan masuk ke wadah div lebar yang lebih kecil sambil mempertahankan rasio lebar: tinggi?
Contoh: stackoverflow.com - ketika gambar dimasukkan ke panel editor dan gambar terlalu besar untuk masuk ke halaman, gambar secara otomatis diubah ukurannya.
html
css
image
autoresize
001
sumber
sumber
Jawaban:
Jangan menerapkan lebar atau tinggi eksplisit ke tag gambar. Sebaliknya, berikan:
Juga,
height: auto;
jika Anda ingin menentukan lebar saja.Contoh: http://jsfiddle.net/xwrvxser/1/
sumber
<a>
tag penutup , gambar tidak diubah ukurannya. Menerapkan aturan pada tag-A memecahkan masalah ini.objek-fit
Ternyata ada cara lain untuk melakukan ini.
akan melakukan pekerjaan. Ini CSS 3 hal.
Fiddle: http://jsfiddle.net/mbHB4/7364/
sumber
object-fit: cover
Saat ini tidak ada cara untuk melakukan ini dengan benar dalam cara deterministik, dengan gambar berukuran tetap seperti file JPEG atau PNG.
Untuk mengubah ukuran gambar secara proporsional, Anda harus mengatur baik tinggi atau lebar untuk "100%", tapi tidak keduanya. Jika Anda mengatur keduanya menjadi "100%", gambar Anda akan ditarik.
Memilih apakah akan melakukan ketinggian atau lebar tergantung pada dimensi gambar dan wadah Anda:
height="100%"
gambar tersebut.width="100%"
gambar tersebut.Jika gambar Anda adalah SVG, yang merupakan format gambar vektor berukuran variabel, Anda dapat memiliki ekspansi agar sesuai wadah terjadi secara otomatis.
Anda hanya perlu memastikan bahwa file SVG tidak memiliki properti ini yang diatur dalam
<svg>
tag:Sebagian besar program menggambar vektor di luar sana akan mengatur properti ini ketika mengekspor file SVG, jadi Anda harus mengedit file Anda secara manual setiap kali Anda mengekspor, atau menulis skrip untuk melakukannya.
sumber
background-size: contain
.Berikut ini adalah solusi yang akan menyelaraskan img Anda secara vertikal dan horizontal dalam div tanpa peregangan bahkan jika gambar yang disediakan terlalu kecil atau terlalu besar untuk muat di div.
Konten HTML:
Konten CSS:
Bagian jQuery:
sumber
Sederhanakan!
Berikan wadah diperbaiki
height
dan kemudian untukimg
tag di dalamnya, aturwidth
danmax-height
.Perbedaannya adalah bahwa Anda menetapkan
width
menjadi 100%, bukanmax-width
.sumber
Retasan yang indah.
Anda memiliki dua cara untuk membuat gambar responsif.
Jalankan di sini
Tapi satu harus menggunakan
img
tag untuk menempatkan gambar seperti itu lebih baik daripadabackground-image
dalam hal SEO karena Anda dapat menulis kata kunci dialt
satuimg
tag. Jadi di sini Anda dapat membuat gambar responsif.Jalankan di sini
sumber
Anda dapat mengatur gambar sebagai latar belakang untuk div, dan kemudian menggunakan properti ukuran latar belakang CSS :
Ini akan "Skala gambar latar menjadi sebesar mungkin sehingga area latar belakang sepenuhnya ditutupi oleh gambar latar belakang. Beberapa bagian dari gambar latar belakang mungkin tidak terlihat dalam area penentuan posisi latar belakang" - W3Schools
sumber
alt
nilai dan hal-hal semacam itu (meskipun Anda juga dapat menambahkan gambar tiruan yang tidak terlihat oleh teknologi non-asisten), atau Anda mungkin harus membuatnya dapat diklik.background-size: contain
dan saya pikir saya pribadi akan pergi rute gambar dummy hanya karena tidak ada cara yang benar-benar mudah untuk melakukan apa yang dijelaskan di sini tanpa JavaScriptLihat solusi saya: http://codepen.io/petethepig/pen/dvFsA
Itu ditulis dalam CSS murni, tanpa kode JavaScript. Ia dapat menangani gambar dengan berbagai ukuran dan orientasi apa pun.
Diberikan HTML seperti itu:
kode CSS adalah:
sumber
Saya baru saja menerbitkan plugin jQuery yang melakukan apa yang Anda butuhkan dengan banyak opsi:
https://github.com/GestiXi/image-scale
Pemakaian:
HTML
JavaScript
sumber
Solusi ini tidak meregangkan gambar dan mengisi seluruh wadah, tetapi memotong sebagian gambar.
HTML:
CSS:
sumber
Saya melihat bahwa banyak orang menyarankan objek-fit yang merupakan opsi yang bagus. Tetapi jika Anda ingin itu berfungsi di browser lama juga , ada cara lain untuk melakukannya dengan mudah.
Cukup sederhana. Pendekatan yang saya ambil adalah memposisikan gambar di dalam wadah dengan absolut dan kemudian meletakkannya tepat di tengah menggunakan kombinasi:
Setelah itu di tengah, saya berikan pada gambar,
Ini membuat gambar mendapatkan efek dari Object-fit: cover.
Berikut ini adalah demonstrasi dari logika di atas.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Logika ini berfungsi di semua browser.
sumber
Berikut ini berfungsi dengan baik untuk saya:
sumber
Saya punya solusi yang lebih baik tanpa perlu JavaScript. Ini sepenuhnya responsif, dan saya sering menggunakannya. Anda sering perlu mencocokkan gambar rasio aspek apa pun dengan elemen penampung dengan rasio aspek tertentu. Dan memiliki semua ini sepenuhnya responsif adalah suatu keharusan.
Anda dapat mengatur lebar maks dan tinggi maks secara independen; gambar akan menghormati yang terkecil (tergantung pada nilai dan rasio aspek gambar). Anda juga dapat mengatur gambar agar selaras seperti yang Anda inginkan (misalnya, untuk gambar produk pada latar belakang putih yang tak terbatas, Anda dapat menempatkannya di tengah bawah dengan mudah).
sumber
Berikan tinggi dan lebar yang Anda butuhkan untuk gambar Anda ke div yang berisi tag <img>. Jangan lupa untuk memberi tinggi / lebar di tag gaya yang tepat.
Di tag <img>, berikan
max-height
danmax-width
sebagai 100%.Anda dapat menambahkan detail di kelas yang sesuai setelah Anda melakukannya dengan benar.
sumber
Kode di bawah ini diadaptasi dari jawaban sebelumnya dan diuji oleh saya menggunakan gambar yang disebut
storm.jpg
.Ini adalah kode HTML lengkap untuk halaman sederhana yang menampilkan gambar. Ini berfungsi sempurna dan telah diuji oleh saya dengan www.resizemybrowser.com. Letakkan kode CSS di bagian atas kode HTML Anda, di bawah bagian kepala Anda. Letakkan kode gambar di mana pun Anda inginkan.
sumber
sumber
Anda harus memberi tahu browser ketinggian tempat Anda meletakkannya:
sumber
Sunting: Penempatan gambar berbasis tabel sebelumnya memiliki masalah di Internet Explorer 11 (
max-height
tidak berfungsi dalamdisplay:table
elemen). Saya telah menggantinya dengan posisi berbasis inline yang tidak hanya berfungsi dengan baik di Internet Explorer 7 dan Internet Explorer 11, tetapi juga membutuhkan lebih sedikit kode.Inilah pendapat saya tentang masalah ini. Ini hanya akan berfungsi jika kontainer memiliki ukuran yang ditentukan (
max-width
danmax-height
sepertinya tidak cocok dengan kontainer yang tidak memiliki ukuran beton), tapi saya menulis konten CSS dengan cara yang memungkinkannya untuk digunakan kembali (tambahkanpicture-frame
kelas danpx125
ukuran kelas ke wadah Anda yang ada).Dalam CSS:
Dan dalam HTML:
DEMO
Tampilkan cuplikan kode
Sunting: Kemungkinan peningkatan lebih lanjut menggunakan JavaScript (meningkatkan gambar):
sumber
line-height
. Jika teks alt memiliki lebih dari satu baris, itu akan mulai terlihat sangat buruk ...Saya memperbaiki masalah ini menggunakan kode berikut:
sumber
Seperti yang dijawab di sini , Anda juga dapat menggunakan
vh
unit alih-alihmax-height: 100%
jika tidak berfungsi di browser Anda (seperti Chrome):sumber
vh
? dan apa yang tidak berfungsi di Chrome?max-height: xx%
(unit persentase) tidak berfungsi di Chrome dengan beberapa elemen sepertiimg
, tetapivh
unit tidak. Namun, persentase bekerja denganheight
,width
,max-width
, dllSaya memusatkan dan menskala gambar secara proporsional di dalam hyperlink baik secara horizontal maupun vertikal dengan cara ini:
Itu diuji di Internet Explorer, Firefox, dan Safari.
Informasi lebih lanjut tentang pemusatan ada di sini .
sumber
Jawaban yang diterima dari Thorn007 tidak berfungsi ketika gambar terlalu kecil .
Untuk mengatasi ini, saya menambahkan faktor skala . Dengan cara ini, itu membuat gambar lebih besar dan mengisi wadah div.
Contoh:
Catatan:
-webkit-transform:scale(4); -webkit-transform-origin:left top;
gaya.sumber
Jika Anda menggunakan Bootstrap, Anda hanya perlu menambahkan
img-responsive
kelas keimg
tag:Gambar Bootstrap
sumber
Solusi sederhana (perbaikan 4 langkah !!) yang sepertinya berfungsi untuk saya, ada di bawah ini. Contoh ini menggunakan lebar untuk menentukan ukuran keseluruhan, tetapi Anda juga dapat membaliknya untuk menggunakan ketinggian.
%
untuk ukuran relatif, atau penskalaan otomatis (berdasarkan wadah gambar atau tampilan)px
(atau lainnya) untuk dimensi statis, atau setelSebagai contoh,
sumber
Semua jawaban yang diberikan, termasuk jawaban yang diterima, hanya berfungsi dengan asumsi bahwa
div
pembungkusnya berukuran tetap. Jadi ini adalah bagaimana melakukannya dengan ukuran apa pundiv
bungkusnya dan ini sangat berguna jika Anda mengembangkan halaman responsif:Tuliskan deklarasi ini di dalam
DIV
pemilih Anda :Lalu masukkan deklarasi ini di dalam
IMG
pemilih Anda :SANGAT PENTING:
Nilai
maxHeight
harus sama untukDIV
danIMG
penyeleksi.sumber
Solusi sederhana adalah dengan menggunakan flexbox. Tentukan CSS penampung untuk:
Sesuaikan lebar gambar yang terkandung hingga 100% dan Anda harus mendapatkan gambar tengah yang bagus di dalam wadah dengan dimensi dipertahankan.
sumber
Solusinya mudah dengan sedikit matematika ...
Cukup masukkan gambar dalam div dan kemudian dalam file HTML tempat Anda menentukan gambar. Atur nilai lebar dan tinggi dalam persentase menggunakan nilai piksel gambar untuk menghitung rasio lebar dan tinggi yang tepat.
Misalnya, Anda memiliki gambar yang memiliki lebar 200 piksel dan tinggi 160 piksel. Anda dapat dengan aman mengatakan bahwa nilai lebar akan 100%, karena itu adalah nilai yang lebih besar. Untuk kemudian menghitung nilai tinggi Anda cukup membagi tinggi dengan lebar yang memberikan nilai persentase 80%. Dalam kode itu akan terlihat seperti ini ...
sumber
Cara paling sederhana untuk melakukan ini adalah dengan menggunakan
object-fit
:Jika Anda menggunakan Bootstrap, cukup tambahkan
img-responsive
kelas dan ubah kesumber
Periksa jawaban saya, Jadikan gambar responsif - cara paling sederhana -
sumber
Atau Anda cukup menggunakan:
Sekarang gambar akan mengambil semua ruang div.
sumber