Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Kelas Premium!
Belajar bikin website dari nol sekarang

cover kelas HTML dan CSS

Gunakan kupon "lebihcepat" untuk diskon 25%!

Kelas Premium!
Belajar Javascript untuk website

cover kelas Javascript

Gunakan kupon "mulaijs" untuk diskon 75 ribu!

Gambar gepeng, jadi melebar, tidak bagus.

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

html css javascript
avatar rankoms
@rankoms

89 Kontribusi 12 Poin

Diperbarui 5 tahun yang lalu

7 Jawaban:

coba set height dan width gambar <pre> &lt;img src="" height="1080px" width="1080px"&gt; </pre>

avatar dianarifr
@dianarifr

642 Kontribusi 316 Poin

Dipost 5 tahun yang lalu

tag image nya di wrap dulu gan. <pre> &lt;figure style="height: 1080px; width: 1080px;" &gt; &lt;img style="width: 100%; height: auto;" src="" alt=""&gt; &lt;/figure&gt; </pre>

avatar normanrmdhn
@normanrmdhn

13 Kontribusi 10 Poin

Dipost 5 tahun yang lalu

salah satu property harus bernilai auto entah itu width/heightnya

avatar kucingku
@kucingku

4 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

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

avatar Dedy Rosyadi
@Dedy Rosyadi

18 Kontribusi 12 Poin

Dipost 5 tahun yang lalu

Coba ini

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

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

avatar reihanagamsk
@reihanagamsk

125 Kontribusi 41 Poin

Dipost 5 tahun yang lalu

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

avatar meatlover
@meatlover

22 Kontribusi 5 Poin

Dipost 5 tahun 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..

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

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

avatar hellogerafis
@hellogerafis

17 Kontribusi 1 Poin

Dipost 5 tahun yang lalu

Tanggapan

Kalo width nya 500px yah tetep gepeng

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?

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

yuup 500px itu hanya contoh, bukan yang pastinya bang. saya bilang ngetes karena kenapa mempermasalahkan gepeng kalo 500px, kan itu hanya value contoh. poin untuk solusi untuk gambar gepeng untuk <img> itu dengan properti object-fit. dan ya benar, kekurangan object-fit dan object-position tidak bisa digunakan untuk ie mana pun ;(, kecuali ms edge sudah bisa ;).

Login untuk ikut Jawaban