flexboxで横並びに配置した画像の余白をなくし親要素の幅いっぱいに画像のみで広げたい

Question

HTMLとCSSの基礎学習を終え簡単なHPを制作しています。
記事を検索してもわからないため、質問をさせて頂きます。

質問タイトルに記載の通り、
flexboxで横並びにした画像4枚を親要素の幅いっぱいに同じ横幅サイズで
かつ、余白無しで配置したいのですが、
①画像間の余白を無くす事ができない。
②親の横幅サイズにならない。

上記二つを解決したいですが、どのようにコーディングすれば良いでしょうか？
ご教示いただければ幸いです。
（※コーディングが素人で見にくいこと、画像の余白を消そうとCSSには無駄な記述が
多いかもしれません m(_ _)m）

＜HTML＞

    <div class="main">
        <div class="space">
            <p>---- space</p>
            <h2>大人が愉しめる、癒しの空間</h2>
            <p>鹿児島・天文館ラウンジ「璃音」は、カウンター席とボックス席があるゆったりとくつろげる空間のお店です。<br>
            接客経験豊富なカウンターレディーが、大切なお客様ひとりひとりの「大切な夜」に丁寧かつ楽しくお付き合いさせていただきます。
            </p>
            <p>落ち着いて会話を楽しみたいときやお一人様のご利用にも、ぜひラウンジ「璃音」をご利用ください。みなさまのお越しを心より
                お待ちしております。
            </p>
</div>
</div>
  　  <div class="picture">
            <ul>
                <li><img src="img/image-テーブル.jpeg" alt="テーブル席"></li>
            </ul>
            <ul>
                <li><img src="img/image-ボトル.jpeg" alt="ボトル"></li>
            </ul>
            <ul>
                <li><img src="img/image-入口.jpeg" alt="入口"></li>
            </ul>
            <ul>
                <li><img src="img/image-看板.jpeg" alt="看板"></li>
            </ul>

       </div>

＜CSS＞

.picture {
    display: flex;
    width: 600px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.picture ul li {
    margin: 0;
    padding: 0;
    gap: 0; 
    
}

.picture ul li img {
    align-items: center;
    height: 150px;
    object-fit: cover; 
    display: block;
}

.picture ul {
    width: calc(100% / 4);
}

.picture ul + li {
    margin-left: 0;
}

Answer 1

ulをFlex要素の親としてdisplay: flex;を指定します。
その子要素liがFlex要素となります。

Flex要素をどう伸縮させるかは、各要素のflexプロパティで指定します。
そしてそのliの幅の100%を、子要素imgの幅として指定します。

.picture {
    width: 600px;
    margin: 0;
    padding: 0;
}

.picture ul {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.picture ul li {
    flex: 1 1 auto;
}

.picture ul li img {
    display: block;
    width: 100%;
}

  　  <div class="picture">
            <ul>
                <li><img src="img/image-テーブル.jpeg" alt="テーブル席"></li>
                <li><img src="img/image-ボトル.jpeg" alt="ボトル"></li>
                <li><img src="img/image-入口.jpeg" alt="入口"></li>
                <li><img src="img/image-看板.jpeg" alt="看板"></li>
            </ul>
       </div>

Comments

[girlstalk]

すごく分かりやすいご回答ありがとうございます！！
また、早急なご対応をいただき大変感謝いたします m(_ _)m

Answer 2

まず、HTMLですが、リスト(ul)内に要素(li)が一つ、その中に画像が入ってますが、リストは本来複数の要素をグループ化するものですので、リスト内に要素が一つというのは違和感があります。
４つの画像を一つのグループとして扱いたいのなら、ul一つにしてその中にli要素を４つ入れるという設計になると思います。

上記の点を考慮すると下記のようなHTMLになります。

<div class="picture">
  <ul>
    <li><img src="img/image-テーブル.jpeg" alt="テーブル席"></li>
    <li><img src="img/image-ボトル.jpeg" alt="ボトル"></li>
    <li><img src="img/image-入口.jpeg" alt="入口"></li>
    <li><img src="img/image-看板.jpeg" alt="看板"></li>
  </ul>
</div>

cssは下記でいいでしょう。

.picture {
   max-width: 600px;
}

.picture ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;  
}

.picture li {
  width: calc(100% / 4);
}

.picture li img {
  width:100%;
  height: 150px;
  object-fit: cover;
}

Comments

[girlstalk]

早急なご対応ありがとうございます！！
すぐに腑に落ちました！感謝いたします！！！