nicepaper @ ウィキ
nicepaper @ ウィキ

「CSS3で画像を領域内に上下中央でフィットさせる方法」の編集履歴（バックアップ）一覧に戻る

CSS3で画像を領域内に上下中央でフィットさせる方法 - (2015/06/19 (金) 20:49:34) の編集履歴(バックアップ)

CSS3で中の画像をボックス内にフィットさせる方法をまとめていきます。6月19日記事

イメージ

目次


ユーザから入れられた画像を常に枠内に収める方法

コードを書いてみる。

次のデザインで、次のコードがあったとします。
イメージ

HTML部 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>フィット</title>
</head>
<body>
<div id="wrapper">
	<div id="left">
    </div>
    <div id="right">
    </div>
</div>
</body>
</html>

CSS部 

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 10px auto;
	padding:50px;
	width: 700px;
	height:300px;
	border:1px solid #000;
}
#left{
	width: 300px;
	height: 300px;
	background: #F00;
	float:left;
}
#right{
	width: 300px;
	height: 300px;
	background: #0F0;
	margin-left:100px;
	float:left;
}
これでは画像を入れた場合はみ出してしまいます。

画像を入れてみる 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>フィット</title>
</head>
<body> 
<div id="wrapper">
	<div id="left">
    <p><img src="tatenaga.png" alt="縦長"></p>
    </div>
    <div id="right">
    <p><img src="yokonaga.png" alt="縦長"></p>
    </div>
</div>
</body>
</html>

すると以下のようになってしまいます。

CSSで対策

img要素の方に幅と高さを書き、object-fit:containを行うとフィットしてくれます。 

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 10px auto;
	padding:50px;
	width: 700px;
	height:300px;
	border:1px solid #000;
}
#left{
	width: 300px;
	height: 300px;
	background: #F00;
	float:left;
}
#left img{
	width:300px;
	height: 300px;
	object-fit: contain;
}
#right{
	width: 300px;
	height: 300px;
	background: #0F0;
	margin-left:100px;
	float:left;
}
#right img{
	width:300px;
	height: 300px;
	object-fit: contain;
}