【iPhone】高さを指定していてもwidthに100%をかけると横に伸びる

iPhoneで確認したときに画像が横に伸びてしまうといった現象が起こる場合があります。

ほかのブラウザやアンドロイドのスマホでは大丈夫なのにiPhoneで起こったりします。

今回はそんなときの問題点や解決方法を紹介します。

iPhoneで問題が起こる現象

html

<div class="box">
	<div class="item item02">
		<div class="icon"><img src="img.jpg"alt=""></div>
	</div>
</div>

css

.item{
	width:200px;
	height:200px;
	padding: 50px 10px;
	position:relative;
	border:solid 1px #000;
	margin-right:10px;
}

.icon{
	position:absolute;
	left:10px;
	top:10px;
}

.icon img{
	height:50px;
	width:100%;
}

上記のように「.icon img」に高さを指定しているけど幅を100%にしているとiPhoneで横に伸びてしまいます。

解決策

.icon img{
	height:50px;
	width:auto;
	max-width:100%;
}

これで解決したと思います。

下記のサンプルをiPhoneで見ると一つ目はうまく表示されていますが2つ目は横に伸びてしまいます。

サンプル