CSSで画像を複数枚、並べて表示したい

Question

CSSで画像を複数枚、並べて表示したい

その際に、ブラウザの画面のサイズを変えても元の画像の縦横比をそのまま画面サイズに合わせて画像の大きさもそのまま自動的に変わっていく方法が知りたい

PCから見た場合は横並びに、スマートフォンから見た場合は画像を縦並びにしたい

今のところ縦並びにする際には、flex-direction: column;を使う予定です。

自分でいろいろと試してはいるのですがなかなか改善されません

画像を横並びにする場合は特に問題はないのですが、スマホ用に画像を縦並びにしてしまうと縦の画像サイズが変わってくれません

試しにheightをpxではなく100%などと変えてはみるのですがそうすると画像が表示されなくなってしまいます。

発生している問題・エラーメッセージ

ブラウザの画面サイズによって、画像の縦のサイズが自動的に変わらない

該当のソースコード

<div class="image">
  <div class="img-1"></div>
  <div class="img-2"></div>
  <div class="img-3"></div>
  <div class="img-4"></div>
</div>

.image {
  display: flex
  flex-direction: column;
  width: 100%;
;}

.img-1 {
	width: 100%;
	height: 620px;
	background: url(https://placehold.jp/3d4070/ffffff/200x200.png) no-repeat top left;
	background-size: 100%;
}
.img-2 {
	width: 100%;
	height: 620px;
	background: url(https://placehold.jp/200x200.png ) no-repeat top left;
	background-size: 100%;
}
.img-3 {
	width: 100%;
	height: 620px;
	background: url(https://placehold.jp/3d4070/ffffff/200x200.png ) no-repeat top left;
	background-size: 100%;
}
.img-4 {
	width: 100%;
	height: 620px;
	background: url(https://placehold.jp/200x200.png ) no-repeat top left;
	background-size: 100%;
}

試したこと

CSS側でそれぞれの画像サイズをwidthとheightを使ってpx単位で決めてあげれば画像が表示されるが、それ以外だと画像が表示されない。
ただ、px単位で画像サイズを決めると、画面サイズに応じてサイズが変わってくれない。

Comments

[Lhankor_Mhy]

コードブロックを使って書いた方が見やすいですよ。https://teratail.com/help/question-tips#questionTips3-3-1

[kei344]

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

Answer 1

素直にimgタグを使うのが早いと思います。
backgroundではなく、imgタグを使用すると何か問題がありますでしょうか？
backgroundを使わないといけない理由がありましたら追記して頂けると助かります。

サンプル(横幅を動かしてみてください。)
https://jsfiddle.net/fno8sebu/

<div class="image">
<div class="img-1"><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt=""></div>
<div class="img-2"><img src="https://placehold.jp/200x200.png" alt=""></div>
<div class="img-3"><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt=""></div>
<div class="img-4"><img src="https://placehold.jp/200x200.png" alt=""></div>
</div>

.image {display: flex;}
img {
  max-width: 100%;
}

【追記】
以下のようにwidthとheightを指定し、
background-size: 100%;を指定してください。
画像サイズがバラバラでうまくいかない場合は、background-size: cover;などを使い、うまく見えるように調整するなど、いろいろ試してみてください。

backgroundを使ったサンプル
https://jsfiddle.net/rxte57hw/6/

.img-1 {
	width: 200px;
	height: 200px;
	background: url(https://placehold.jp/3d4070/ffffff/200x200.png) no-repeat top left;
	background-size: 100%;
}

【追記2】
少し強引ですが、
padding-topを画像高さ ÷ 画像横幅 × 100%とするやり方があります。

サンプル
https://jsfiddle.net/rxte57hw/11/

参考
https://www.nxworld.net/tips/css-background-aspect-ratio.html

.image {
  display: flex;
  flex-direction: column;
}

.img-1 {
	width: 100%;
	background: url(https://placehold.jp/3d4070/ffffff/824x620.png) no-repeat center center;
	background-size: cover;
  padding-top: calc(620 / 824 * 100%);
}

Comments

[yokoyama_takuzo]

回答ありがとうございます。
実は今作っている途中のサイトがもう既にCSSで画像を置いてしまっていて、ちょうどこれからレスポンシブ対応しようとした時に画像サイズの処理がうまくいかずに困っていたところでした。
一応、HTML側をimgで書き換えた方が早いものかとも思ったのですが、今回もしCSSでどうにか出来る方法があればこの際に勉強したいと考えていたところです。そういった方法はご存知でしょうか？

[kenreta]

追記しました。画像サイズが分からないので、今回はシンプルな場合を想定しました。画像サイズがバラバラだけど、見栄え的な問題で同じサイズになるようにしたい場合は、それぞれのwidthとheightを揃えて、background-size:coverを指定すると良い感じに表示してくれます。色々試してみてくださいね。

[yokoyama_takuzo]

回答ありがとうございました。そして何度もすみません、
実は今回最終的にレスポンシブで縦に並べたくて、その際にflex-direction: column;を使おうかと考えていたのですが、縦に並べてしまうとブラウザ画面の大きさによって画像のサイズが変わらないようなのです。
ちなみに画像サイズは824x620で、横並びだと問題なく画像サイズが変わりますが、、

今は一応 width:100%; height:620px; にしています。
この場合だと横幅のサイズは自動的に変わってくれるのですが、縦の幅が固定されてしまい、下部に真っ白な隙間が出来てしまいます。
この場合はもう諦めてhtmlを書き直した方が良いものでしょうか？
もし改善方法がないという事でしたら潔くあきらめようと思います。

[kenreta]

確かに、縦に並べた場合、高さを固定してしまっているので、レスポンシブにした場合に隙間ができてしまいますね。

一応、追記2を書きましたが、今回は、
>もしCSSでどうにか出来る方法があればこの際に勉強したいと考えていたところです。
というのを汲んで実現方法を書きました。
単に実現するのであれば前述したとおり「素直にimgタグを使うのが早い」です。「勉強」ではなく「実現させること」が目的であれば、backgroundにこだわる意味はありません。こういう方法もあるんだなぐらいに留めてください。

[yokoyama_takuzo]

とても親切に教えて下さり、本当にありがとうございました。
本当に感謝しています。
今日初めてTeratailを使ってみたのですが、最初の方がこんなに親切な方で本当に感謝しています。
ありがとうございました。