写真表示の縦横比を揃える方法

liの高さと横幅の比率を４：３で固定したいのですが方法がわかりません。

画像を2カラムで並べたいのですが、その際画像は、元の縦横比関係なく縦横４：３のサイズで表示したく、はみ出た部分は表示しないようにしたいのですが、わかる方がいればぜひアドバイスが欲しいです。
今回は、liの幅が親要素の50％になるようにし、li自体を４：３の大きさに固定して子要素のimgの高さを100％にすれば良いのではないかと考えたのですが、他に良い方法がありそうな気がしてなりません。

html
1  <div class="content">
2    <ul class="img-list">
3      <li class="img-list__img">
4        <a href="#"><img src="./img/#.jpeg" alt=""></a>
5      </li>
6      <li class="img-list__img">
7        <a href="#"><img src="./img/#.jpeg" alt=""></a>
8      </li>
9      <li class="img-list__img">
10        <a href="#"><img src="./img/#.jpeg" alt=""></a>
11      </li>
12      <li class="img-list__img">
13        <a href="#"><img src="./img/#.jpeg" alt=""></a>
14      </li>
15    </ul>
16  </div>

css
1.content {
2  width: 95%;
3  heitht: 0 auto;
4}
5
6.img-list {
7  display: flex;
8  flex-wrap: wrap;
9  width: 100%;
10}
11
12.img-list__img {
13  width: 50%;
14  list-style: none;
15  box-sizing: border-box;
16  text-align: center;
17}
18
19.img-list__img img {
20  height: 100%;
21  margin: 0 auto;
22  object-fit: cover;
23}

内容としては、ユーザーが登録した写真を同一サイズで表示させるページを作ろうとしています。
登録時にサイズをトリミング？して保存したほうがよいのか、登録された写真を表示の際に調整したほうが良いのか、まったくわかりません。どちらの方が一般的なのでしょう？
phpで写真はアップロードしています。

イメージはこんなかんじです。
[リンク内容](https://www.airbnb.jp/s/experiences?traffic_source=SEO

)

hatena19

2019/12/23 11:09

画像の表示サイズは width='268' height='357' の固定ですか。また、写真のレイアウトは画面幅に関係なく2列固定でいいのですか。画面幅が広いと間延びした感じになりますが。また、スマホサイズなどは考慮しなくていいのですか。

humhum81131

2019/12/23 11:17

表示サイズはミスです。特に指定はしません。メディアクエリでスマホでは２列、PCでは４列で表示しようと思っています。イメージはこんなかんじです。 https://www.airbnb.jp/s/experiences?traffic_source=SEO

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

回答2件

ベストアンサー

サイズ指定の単位にvwを使うなら、imgタグのままでもOKですね。

htmlは質問文のまま。

css
1.content {
2  width: 95%;
3  margin: 0 auto; /*heitht:を修正*/
4}
5.img-list {
6  list-style: none;
7  display: flex;
8  flex-wrap: wrap;
9  justify-content: space-between; /*水平余白、お好みで*/
10  padding-inline-start: 0px;/*ulの初期値リセット*/
11}
12.img-list__img {
13  box-sizing: border-box;
14  text-align: center;
15}
16.img-list__img img {
17  width: 45vw; 
18  height: calc(45vw * 4 / 3);
19  object-fit: cover;
20}
21@media screen and (min-width: 700px) {  .img-list::before{
22  .img-list__img img {
23    width: 22vw; 
24    height: calc(22vw * 4 / 3);
25  } 
26  .img-list::before{
27    content:"";
28    display: block;
29    width: 22vw;
30    order:1;
31  }
32  .img-list::after{
33    content:"";
34    display: block;
35    width: 22vw;
36  }
37}

縦横比 4:3 固定
4列→2列のブレークポイント 700px

CSS Grid での実装例（IE10非対応）

css
1.content {
2  width: 95%;
3  margin: 0 auto;
4}
5.img-list {
6  list-style: none;
7  display: grid;
8  justify-content: space-between;
9  grid-template-columns: 45vw 45vw;
10  padding-inline-start: 0px;/*ulの初期値リセット*/
11}
12.img-list__img {
13  box-sizing: border-box;
14  text-align: center;
15}
16  .img-list__img img {
17    width: 44vw; 
18    height: calc(44vw * 4 / 3);
19  } 
20
21@media screen and (min-width: 700px) {
22  .img-list {
23    grid-template-columns: 22vw 22vw 22vw 22vw;
24  }
25  .img-list__img img {
26    width: 22vw; 
27    height: calc(22vw * 4 / 3);
28  } 
29}

投稿2019/12/23 12:44

編集2019/12/24 18:39

hatena19

総合スコア33699

thyda.eiqau

2019/12/23 13:14

おお、object-fitというのは知りませんでした。スマートでよいですね

humhum81131

2019/12/23 15:44

回答ありがとうございます。早速試してみたところ、かなり想像に近い形で作る出来ました。最後の列でimgの数が列の数と合っていない場合、space-betweenだと配置がずれてしまうのですが疑似要素を追加すれば解決しますか？その場合、phpでimgの数をpg_num_rowsなどで調べないといけないですかね？だんだんと話が逸れてきてしまいすみません。m(__)m

hatena19

2019/12/24 00:03

> space-betweenだと配置がずれてしまう具体的にどような配置にしてたいのでしょうか。他の設定（sspace-around, center)も試してみてください。

humhum81131

2019/12/24 03:43

4列の場合、画像の数が4の倍数個(4n個)でないときは端数がでてしまうのですが、それらも順番に同じ列上に収めたいです。試しに @media screen and (min-width: 769px) {　//4列のとき .img-list::before{ content:""; display: block; width: 22vw; height: calc(22vw * 4 / 3); order:1; } .img-list::after{ content:""; display: block; width: 22vw; height: calc(22vw * 4 / 3); } } を書き加えてみたところ一応解決はしたのですが、端数が3のときは余計に空白の横一列が追加されてしまいました。

hatena19

2019/12/24 04:29

before after の疑似要素のheightを設定しなければ、高さ0になり改行しても空白はできません。回答のコードを修正しましたので参考にしてください。また、ブラウザでIE10を対象にしないならCSS Gridを使うとよりシンプルに記述できますので余裕があれば調べてみてください。

humhum81131

2019/12/24 06:24

完璧でした！ありがとうございます！

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

もとの画像のサイズ (アスペクト比) に関わらず、一定の表示サイズに収めたいときは、imgタグを使うのではなく、background-imageとbackground-sizeで指定すると楽です。

html
1<div class="content">
2  <ul class="img-list">
3    <li class="img-list__img">
4      <a href="#" style="background-image:url('./img/#.jpeg')"></a>
5    </li>
6    <li class="img-list__img">
7      <a href="#" style="background-image:url('./img/#.jpeg')"></a>
8    </li>
9    <li class="img-list__img">
10      <a href="#" style="background-image:url('./img/#.jpeg')"></a>
11    </li>
12    <li class="img-list__img">
13      <a href="#" style="background-image:url('./img/#.jpeg')"></a>
14    </li>
15  </ul>
16</div>

css
1.content {
2  width: 95%;
3  height: 0 auto; /* ← heitht になっていましたが、heightです */
4}
5
6.img-list {
7  display: flex;
8  flex-wrap: wrap;
9  width: 100%;
10}
11
12.img-list__img {
13  width: 50%;
14  list-style: none;
15  box-sizing: border-box;
16  text-align: center;
17}
18
19.img-list__img a {
20  display: block;
21  width: 40vw; /* 適当に入れていますので適当に修正してください */
22  height: 30vw;
23  background-position: center;
24  background-repeat: no-repeat;
25  background-size: contain;
26}