レスポンシブWebデザイン・100%幅対応 余白付き画像の配置を左右中央に配置し、画面幅が小さいときは最低幅まではカットする方法

  • このエントリーをはてなブックマークに追加

PC向けのCSSとスマートフォン用のCSSをセットで用意します。

PC

/********** 100%画像 **********/
#main-visual{
	position: relative;
	overflow: hidden;
}
#main-visual img{
	display:block; 
	position: relative;
	margin: 0 0 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 100%;
	min-width: 1000px;
}

スマートフォン

スマートフォンは左右カットの幅は比率で決まっているため、vwや%で、カットすればOK。
画像をPC・スマートフォンで共有化しつつ、カットも思ったとおりにできる。

/********** 100%画像 **********/
#main-visual{
	position: relative;
	overflow: hidden;
}
#main-visual img{
	 display:block;
	position: relative;
	left: -20%;
	width: 140%;
}