Gambar gepeng, jadi melebar, tidak bagus.

rankoms
86 Kontribusi 11 Coto
2 bulan yang lalu

Selamat malam sekolah koding, saya mau nanya masalah css. saya mempunyai image dengan ukuran segiempat, ukuran 1080px x 1080px. namun ketika gambar di taro di dalam div dengan ukuran persegi panjang dengan mempunyai lebar lebih besar, gambar menjadi gepeng atau tidak sesuai. bagaimana cara memperbaiki kondisi image seperti ini? terima kasih

Tag: html css javascript

Jawaban

dianarifr
634 Kontribusi 297 Coto
2 bulan yang lalu

coba set height dan width gambar

<img src="" height="1080px" width="1080px">

normanrmdhn
13 Kontribusi 10 Coto
2 bulan yang lalu

tag image nya di wrap dulu gan.

<figure style="height: 1080px; width: 1080px;" >
  <img style="width: 100%; height: auto;" src="" alt="">
</figure>

kucingku
4 Kontribusi 0 Coto
2 bulan yang lalu

salah satu property harus bernilai auto entah itu width/heightnya

Dedy Rosyadi
18 Kontribusi 12 Coto
2 bulan yang lalu

bisa diatur lewat css gan, mungkin bisa di kasih !important

reihanagamsk
122 Kontribusi 40 Coto
2 bulan yang lalu

Coba ini

<div style="width: 250px;">
  <img src="image.jpg" style="max-width: 100% !important; max-height: 100% !important;">
</div>

klo mau ubah gambar nya, ubah div nya aja (parent), tinggi dan lebar udah standar dari gambarnya

meatlover
22 Kontribusi 5 Coto
2 bulan yang lalu

<div>
  <img src="image.jpg" style="max-width: 100%; display: block;">
</div>

hellogerafis
17 Kontribusi 1 Coto
1 bulan yang lalu

hehe teman2 untuk jawabannya belum tepat ya ;) bisa menggunakan value auto pada width atau height.. atau pada value width yang sudah ditentukan 100px, maka agar tidak gepeng ada opsi yakni menggunakan properti css object-fit. dengan object-fit, kita menyuruh browser untuk menentukan object ratio gambar terhadap gambar kita agar proportional dengan 100px value yang telah kita tentukan.. berikut contoh codenya..

.blog-header img {
   width: 500px;
   height: auto;
   object-fit: cover; /* cover, contain, fill, scale-down */
   object-position: center;
}

Baca dokumentasinya di https://www.w3schools.com/css/css3_object-fit.asp

Kalo width nya 500px yah tetep gepeng - meatlover
value width itu hanya contoh saja, tergantung dari desain ui web nya.. hehm tetapi kalau udah object-fit cover bukan gepeng, tapi bakalan buram.. kamu ngetes saya? - hellogerafis
Bukan nge-test. Maka nya width 500px itu bukan jawaban. Dan jawaban orang laen bukan belum tepat. Dan object-fit tidak ada guna nya di IE11 - meatlover

Tampikan semua komentar

< Kembali Ke Forum

Pertanyaan lainnya

> Kendala mengirim email dengan nama pengirim dinamis mailtrap & laravel
> Hasil dari code yang kurang sempurna
> Bagaimana memanggil variable di dalam javascript ?
> Bagaimana agar website aman ketika di akses di browser
> Fungsi di html tidak jalan jika dibuka tanpa melalui localhost

Seikhlas Info

Fitur baru: "Komentar"! baca ini ya
Bikin forum yang nyaman, santai dan sopan