「CSS3で画像を領域内に上下中央でフィットさせる方法」の編集履歴（バックアップ）一覧に戻る
CSS3で中の画像をボックス内にフィットさせる方法をまとめていきます。6月19日記事
~
~
イメージ（両方とも300×300のボックス）
#image(width=500,003.png)
~
~
目次
#contents
~
~
----
~
*大きすぎる画像を常に枠内に収める方法
画像が大きすぎるのを枠内に収める方法としてimgのwidthを100%にする方法があります。
しかし、その方法では縦がはみ出てしまう場合があります。指定された枠内にフィットする方法をまとめていきたいと思います。
*コードを書いてみる。
次のデザインで、次のコードがあったとします。
~
イメージ
#image(width=500,001.png)
HTML部&color(red){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>
すると以下のようになってしまいます。
#image(width=500,002.png)
*CSSで対策
&color(red){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;
}
するとこのようになります。
#image(width=500,003.png)
~
~
*小さい画像を入れてみる。
300pxのボックスですが、小さい画像を入れてみます。
#image(width=500,004.png)
画像が拡大されて、フィットされて格納されました。
~
~
*まとめ
object-fitプロパティはCSS3になってきてからでてきたものです。初期値はfillで次のようなものが設定可能です。
~
~
|値|説明|h
|fill |画像は縦横比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされる。つまり少しデブっちょになったり、スマートになりすぎたりする。（初期値）|
|contain |画像が縦横比を保ちながら、全体がコンテンツボックスに収まるようにリサイズされます。画像の幅と高さのうち、長いものがコンテンツボックスにフィットします。|
|cover|画像が縦横比を保ちながら、コンテンツボックスを完全に覆うようリサイズされます。画像の幅と高さのうち、短いものがコンテンツボックスにフィットし、長いものははみ出します。|
|none |画像はリサイズしません。|
|scale-down |「none」か「contain」の小さい方を適用します。|
~
~
以上
