アットウィキロゴ
nicepaper @ ウィキ
アットウィキロゴ
nicepaper @ ウィキ
ページ一覧

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

イメージ（両方とも300×300のボックス）



目次




大きすぎる画像を常に枠内に収める方法

画像が大きすぎるのを枠内に収める方法としてimgのwidthを100%にする方法があります。 しかし、その方法では縦がはみ出てしまう場合があります。指定された枠内にフィットする方法をまとめていきたいと思います。

コードを書いてみる。

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

HTML部 reset.cssを読み込んでいます。 

<!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;
}
これでは画像を入れた場合はみ出してしまいます。

画像を入れてみる

600×800と800×600の画像を入れていきます。 

<!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:scale-down を行うとフィットしてくれます。 

@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: scale-down;
}
#right{
	width: 300px;
	height: 300px;
	background: #0F0;
	margin-left:100px;
	float:left;
}
#right img{
	width:300px;
	height: 300px;
	object-fit: scale-down;
}

するとこのようになります。



小さい画像を入れてみる。

300pxのボックスですが、小さい画像を入れてみます。

画像が中央に配置されました。

まとめ

object-fitプロパティはCSS3になってきてからでてきたものです。初期値はfillで次のようなものが設定可能です。

値 説明
fill 画像は縦横比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされる。つまり少しデブっちょになったり、スマートになりすぎたりする。（初期値）
contain 画像が縦横比を保ちながら、全体がコンテンツボックスに収まるようにリサイズされます。画像の幅と高さのうち、長いものがコンテンツボックスにフィットします。
cover 画像が縦横比を保ちながら、コンテンツボックスを完全に覆うようリサイズされます。画像の幅と高さのうち、短いものがコンテンツボックスにフィットし、長いものははみ出します。
none 画像はリサイズしません。
scale-down 「none」か「contain」の小さい方を適用します。

画像が大きすぎる場合、object-fit:containだけでよいが、小さい画像を挿入された場合にも中央に寄せる場合はobject-fit:scale-down;にしておくとうまく対応できます。

以上

「CSS3で画像を領域内に上下中央でフィットさせる方法」をウィキ内検索
最終更新：2015年06月20日 09:50