【CSS】Facebookのような、はみ出した画像表示をCSSで実現する方法

2013/04/16

Written by: EISUKE

Category: IT

masterpeace21.com_facebook-img-sample

モバイル版のFacebookなどを見ていると、画像表示が横幅を超えて表示されているのがわかります。こういった表示方法をCSSで実現する方法を紹介したいと思います。

今回はサンプルを用意しました。

Sampleはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<style>
	img{
	max-width:100%;
	box-shadow:0 0 10px rgba(0,0,0,0.6);
	}
	.over-width{
	max-width:520px;
	width:520px;
	margin:0px -30px 0px;
	}
	.full-width{
	max-width:500px;
	width:500px;
	margin:0px -20px 0px;
	}
	#content{
	padding:20px;
	background:#fff;
	margin:0 auto;
	width:460px;
	}
	</style>
</head>
<body style="margin-left:40px;padding:0;background:rgba(197, 202, 223, 0.76);">
<div id="content">
<h2 style=>Facebookのような画像表示のSample</h2>
<p>普通(padding:20pxが効いてる)</p>
<p><img src="http://masterpeace21.com/wp-content/uploads/2013/04/121202facebook.jpg" ></p>
<p>横幅ピッタリ(width:500px;margin:-20px)</p>
<p><img src="http://masterpeace21.com/wp-content/uploads/2013/04/121202facebook.jpg" class="full-width"></p>
<p>はみ出し(width:520px;margin:-30px)</p>
<p><img src="http://masterpeace21.com/wp-content/uploads/2013/04/121202facebook.jpg" class="over-width"></p>
<p>ポイントは画像に対してのmarginをマイナス指定してあげる事。</p>
<p>いいね 1件<br/></p>
</div>
</body>
</html>

ポイントはコンテンツ部分で指定したwidth,paddingに対して、画像にmarginをマイナス指定、幅指定することです。

画像を強調させたいデザインのサイトを創るときには結構使える手法なんじゃないでしょうか。