CSS memperkecil skala gambar agar muat dalam div yang mengandung, tanpa menentukan ukuran aslinya
Saya ingin memiliki situs web di mana saya dapat meng-upload gambar dengan ukuran yang berbeda untuk ditampilkan dalam slider jquery. Saya tidak bisa'sepertinya tidak bisa menyesuaikan (memperkecil) gambar dalam div yang berisi. Inilah cara yang ingin saya lakukan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>Dan CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}Saya sudah mencoba mengatur lebar-maksimal gambar saya menjadi 100% di CSS. Tapi itu tidak berhasil.
Anda bisa menggunakan gambar latar belakang untuk mencapai hal ini;
Dari MDN - Ukuran Latar Belakang: Berisi:
Kata kunci ini menetapkan bahwa gambar latar belakang harus diskalakan menjadi sebesar mungkin sambil memastikan kedua dimensinya kurang dari atau sama dengan dimensi yang sesuai dari area pemosisian latar belakang.
CSS:
#im {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: contain;
}HTML:
<div id="wrapper">
<div id="im">
</div>
</div>
jika Anda menginginkan lebar dan tinggi, Anda bisa mencoba
background-size: cover !important;tetapi ini tidak akan mendistorsi gambar tetapi mengisi div.
Ini sangat sederhana. Cukup Atur lebar img ke 100%
