様々なサイズの画像をアップロードして、jqueryのスライダーで表示させるサイトを作りたいと思っています。 しかし、画像をdivの中に収める(縮小する)ことができません。以下のような方法を考えています。
<!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>
そして、CSSは
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
CSSで画像の最大幅を100%にしようとしました。しかし、それではうまくいきません。
そのためには、[背景画像][1]を利用するとよいでしょう。
MDNより - [Background Size: Contain][2]。
このキーワードは、背景画像ができるだけ大きくなるようにスケーリングすることを指定しますが、その際、背景画像の寸法が背景の配置領域の対応する寸法以下になるようにします。
[デモ][3].
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>
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/background [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size [3]: