rankoms
89 Kontribusi 11 Coto
8 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
dianarifr
639 Kontribusi 303 Coto
8 bulan yang lalu
coba set height dan width gambar
<img src="" height="1080px" width="1080px">
normanrmdhn
13 Kontribusi 10 Coto
8 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
8 bulan yang lalu
salah satu property harus bernilai auto entah itu width/heightnya
Dedy Rosyadi
18 Kontribusi 12 Coto
8 bulan yang lalu
bisa diatur lewat css gan, mungkin bisa di kasih !important
reihanagamsk
125 Kontribusi 40 Coto
8 bulan yang lalu
Coba ini
<div style="width: 250px;">
<img src="image.jpg" style="max-width: 100% !important; max-height: 100% !important;">
</div>
meatlover
22 Kontribusi 5 Coto
7 bulan yang lalu
<div>
<img src="image.jpg" style="max-width: 100%; display: block;">
</div>
hellogerafis
17 Kontribusi 1 Coto
7 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;
}Login untuk diksusi di forum sekolah koding