CSS reduce la imagen para que quepa en div conteniendo, sin especificar el tamaño original
Quiero tener un sitio web donde pueda cargar imágenes de diferentes tamaños para que se muestren en un control deslizante jquery. Parece que no puedo encajar (reducir) la imagen en un div que contiene. Así es como pretendo hacerlo.
<!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>
Y el CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
He intentado establecer el ancho máximo de mi imagen en 100% en CSS. Pero eso no funciona.