css 画像比率を保ったまま拡大・縮小する方法

cssで画像の比率を変更するときに、

width:100%
max-width:80vw;
height:auto;

で縦横比を保ったまま拡大や縮小ができるとサイトに書いてあったのですが、

width:auto;

でも同じなのでしょうか？

また、

width:auto;
max-width:80vw;
height:auto;
max-height:90vh;

のような形でも比率を保ったままで拡大縮小ができるのでしょうか？

kei344

2016/06/28 05:28

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

退会済みユーザー

2016/06/28 07:01

毎回ご指摘ありがとうございます！修正しましたので、ご回答をお願い致します！！！

行動規範の内容に同意します

回答2件

ベストアンサー

縦横比を保った画像（フルードイメージ）にするためのコードは通常、
次の2種類が一般的かと思います。

CSS
1/*パターン1*/
2img {
3  max-width: 100%;
4  height: auto;
5}
6/*パターン2*/
7img {
8  width: 100%;
9  height: auto;
10}

パターン1の場合、画像の最大サイズはimg画像本来の原寸サイズとなり、それ以上には拡大しません。
画像本来のサイズより拡大はしたくない場合にはこちらを使います。

パターン2の場合、画像は親要素のサイズにあわせてどこまでも拡大します。
適切なサイズの画像を用意できない場合でも、サイズ不足を防ぐことができます。
その代わり、別途何らかの方法（max-widthを併記する、あるいは親要素にサイズを指定する等）で
最大サイズを指定しておかないと、レイアウトを適切に保つことができない場合があります。

なお、

CSS
1img{
2  width:100%
3  max-width:80vw;
4  height:auto;
5}

掲示されているこちらのコードは、基本的に上記のパターン2であると思われます。
ただ、2行目に記述されている「max-width:80vw;」の根拠が不明です。
たまたま参考にしたサイトで実現したいデザインの都合に合わせて必要な最大値を設定しているだけである可能性があります。

また、

CSS
1img {
2  width:auto;
3}

こちらのコードでは伸縮画像にはなりません。原寸表示されるだけです。

CSS
1img {
2  width:auto;
3  max-width:80vw;
4  height:auto;
5  max-height:90vh;
6}

こちらの場合は、縦横比を保って伸縮する状態にはなりますが、

・width:autoとheight:autoが初期値と同じであるため無駄な記述になる
・画像最大値の設定が80vw, 90vhであることが全てのケースで適切であるか不明
・vw, vhの単位を理解しない環境では伸縮画像にならない

といった問題があり、あまり適切であるとは思えません。

投稿2016/06/28 16:49

aKusano

総合スコア3763

私はとりあえずやってみるタイプなので
実際に3パターンやってみたらどうですか

<html>
<head>
<style>
#a {
	width: 100%;
	max-width: 80vw;
	height: auto;
}

#b {
	width: auto;
	max-width: 80vw;
	height: auto;
}

#c {
	width: auto;
	max-width: 80vw;
	height: auto;
	max-height: 80vw;
}
</style>
</head>
<body>
	<img id="a" src="images/banner_s.jpg">
	<img id="b" src="images/banner_s.jpg">
	<img id="c" src="images/banner_s.jpg">
</body>
</html>

投稿2016/06/28 07:39