【初心者】要素の横並びについて

横並びは成功したのですが・・・

一番左の「Web広告運用」の画像だけ少し小さくなってしまいます。
初心者なもので、原因がわからず困っています…

該当のソースコード

<p class="center"><span  style="font-size:30px; font-weight:bold;">SERVICE</span></p>
<p class="center">広告運用をメインとし、様々なジャンルに挑戦します。<br />
【ITの力を使い私たちの生活をより豊かにする】<br />
  をモットーに日々従業員が同じ方向を向き、切磋琢磨しています。</p>

<div class="flex"><div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/60927f3819e3733123e6472fba396936_s.jpg" alt=""><p class="center"><span class="title1">Web広告運用</span><br/>リスティング広告、ディスプレイ広告、SNS広告、ネイティブ広告、動画広告を扱い、サイト（記事）制作から運用まで全て行っています。</p></div>
<div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/f2a748f11f557513492b2fc602fcf30e_s.jpg" alt=""><p class="center"><span class="title2">Webマーケティング</span><br/>当社ではWebでの広告運用のみを行なっております。情報や結果を数値化することが可能です。出た結果を元に傾向の分析、改善を素早く行うことができます。</p></div>
<div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/0959dddafae5c6f16f02555991ea1741_s.jpg" alt=""><p class="center"><span class="title3">Webコンサルティング</span><br/>当社が広告運用の事業で培った、Web広告を用いた「集客」「販売」「改善」のノウハウを活かし、様々なジャンルの業会社にコンサルティングを行います。</p></div>
<div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/ec2afdb24003aa2bed87dc741d4d694b_s.jpg" alt=""><p class="center"><span class="title1">アプリ開発</span><br/>「世の中の人に役立つアプリ」を作成します。現在人員不足により、開発には至っておりませんが今後アプリのリリースも視野に入れ、人員を増やす予定です。</p></div></div>

CSS

.center {
    text-align: center;
}
 
.flex{
  max-width: 1200px;
  margin: 0 auto;
}

img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
  width:300px;
  height:150px;
  object-fit: center;
}

@media only screen and (min-width:400px) { 
.flex{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
}
  .item+.item{
    margin-left:1.0em;
    
  }
}

.title1{
  color: #b3274a;
  font-weight: bold;
  font-size: 18px;
}

.title2{
  color: #356598;
  font-weight: bold;
  font-size: 18px;
}

.title3{
  color: #0fa334;
  font-weight: bold;
  font-size: 18px;
}

.title4{
  color: #684579;
  font-weight: bold;
  font-size: 18px;
}

miyabi_pudding

2019/10/04 15:48

どう小さくなるのでしょうか？どう表示したいのかを、手書きの画像でいいので掲示してください。そして、現状はどう表示されているかもキャプチャでいただけると幸いです。また、もっとも大事な、適用させているCSSも質問本文に記載してください。

chomu.

2019/10/04 15:51

失礼いたしました。情報を追加しましたので、ご確認よろしくお願いいたします。

miyabi_pudding

2019/10/04 15:53 編集

質問修正ありがとうございます。一番左が若干高さが足りないのですね。回答に移らせていただきます。

chomu.

2019/10/04 15:53

すみません！！修正完了いたしました！

miyabi_pudding

2019/10/04 16:05 編集

すみません、普通に、いい感じの大きさで（一番左の画像も小さくなることなく）表示されてしまったのですが・・・。画像のような表示になる、ブラウザ、デバイスなど追記いただけないでしょうか？もしくは、今回の質問に記載されていない部分が影響を及ぼしてる可能性があるので、 HTMLと適用しているCSS全文を記載いただけませんか？？

chomu.

2019/10/04 16:04

え、本当ですか！？一応確認したのが、＜PC＞ GoogleChrome ＜SP＞ Safari です！

chomu.

2019/10/04 16:04

あ、スマホは縦並びになるので関係なかったです・・・

miyabi_pudding

2019/10/04 16:06

なるほど・・・。上のコメントの通りなので、可能な限りで構いません、HTML全文と、CSS全文をいただきたいです。

chomu.

2019/10/04 16:11

修正しました！ちなみに、これは https://liveweave.com/ このサイトで見てもその現象になってしまいます・・・

miyabi_pudding

2019/10/04 16:20 編集

私も、Liveweaveでもやってみましたが、キャプチャのような表示にはなりませんでした。 HTML、CSSは本当に、質問に記載いただいているものと、質問者さんが表示しているものは本当に同一のものでしょうか？？画像に関して特に、一つ目と二つめに関して、質問記載のHTMLでは、現象確認のキャプチャとは違う画像がでてきてます。

m.ts10806

2019/10/04 19:09

初心者アイコンありますし、実際につけられていますし【初心者】という但し書きは不要に思います。

kyoya0819

2019/10/04 22:10

どうでもいいですけどobject-fitにcenterは存在しませんobject-position: centerの間違えでは？ https://developer.mozilla.org/ja/docs/Web/CSS/object-fit https://developer.mozilla.org/ja/docs/Web/CSS/object-position

Zuishin

2019/10/04 23:38

画像が全然違いますね。質問者と回答者が違うものを見ていたらすれ違うので、質問者さんは本番用のコードではなく、質問に載せたコードを見て話しをしてください。問題の再現する最小限のコードを作り、<!DOCTYPE> から </html> まで省略なく完全に掲載するのがいいと思います。そのコードで問題の原因を洗い出し、実際のコードに適用してください。

chomu.

2019/10/05 02:31

みなさんコメントありがとうございます。質問する以前の知識が不足していたので、もう一度自分で色々やってみます・・・。

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

回答1件

ベストアンサー

質問のCSSでは、imgにheight: 150px;として高さを固定していますが、これを外すと、添付画像のように高さがそろわなくなりますね。

それ以前に、それぞれの列の幅がバラバラです。
４つの画像のサイズはすべて同じサイズ(640*427px)にもかからわず。

原因は、フレックスボックスで、flex-wrap:nowrap;と折り返しを禁止しているために、幅が自動で縮小されるのですが、明示的に幅を指定せずになりゆきに任せてるのが原因だと思います。

ということで下記の方針で設計すればいいでしょう。

リストitem要素の幅を明示的に指定する。4列なら25%（余白を付けるなら少し小さめに）
余白はjustify-content:space-between;でフレックスで自動設定しているので指定する必要はない。
画像の高さを固定してしまうと、画面幅によって縦横比が崩れるので、高さは指定しない。

上記の方針のCSS例

CSS
1img{
2  max-width: 100%;
3  display: block;
4  margin: 0 auto;
5  object-fit: center;
6}
7
8@media only screen and (min-width:400px) { 
9  .flex{
10    display:flex;
11    flex-wrap:nowrap;
12    justify-content:space-between;
13  }
14  .item{
15    width: 24%;
16  }
17}