Daftar dan Belajar Sekarang!

Gambar gepeng, jadi melebar, tidak bagus.

foto 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 https://i.ibb.co/7Wd3YhR/image.png

Jawaban
foto dianarifr
634 Kontribusi 297 Coto
2 bulan yang lalu
coba set height dan width gambar
<img src="" height="1080px" width="1080px">

foto 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>

foto kucingku
4 Kontribusi 0 Coto
2 bulan yang lalu
salah satu property harus bernilai auto entah itu width/heightnya

foto Dedy Rosyadi
18 Kontribusi 12 Coto
2 bulan yang lalu
bisa diatur lewat css gan, mungkin bisa di kasih !important

foto 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

foto meatlover
22 Kontribusi 5 Coto
2 bulan yang lalu
<div>
  <img src="image.jpg" style="max-width: 100%; display: block;">
</div>

foto 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


Login untuk diksusi di forum sekolah koding