プログラミング超初心者です。 某動画を参考に学習しておりますが 悩んでおります。

画像

HTML、CSS82閲覧xmlns="http://www.w3.org/2000/svg">100

ベストアンサー

0

二度もお答えいただき有難うございます。 .contents { display: flex; } .contents-item img { width: 100%; height: 100%; } を追記しただけで横並びになりました。 しかし写真が圧縮されました、 自分で考えます。

その他の回答(1件)

0

画像の大きさがわからないので、width や height は仮の値です。 画像のパスやファイル名は合っているのでしょうね? ● CSS section#featuring {width: 80%; margin: auto;} #featuring h3 {border-bottom: lightgrey solid 2px;} div#contents {display: flex; width: 100%; justify-content: space-between;} figure.contents-item {width: 24%; height: 210px; margin: 0; background-color: lightcoral;} .contents-item img {width: 100%; object-fit: cover;} ● HTML <section id="featuring"> <h3>玉袋浩二を知ろう</h3> <div id="contents"> <figure class="contents-item"> <img src="img/IMG_6637.jpeg"> <figcaption>全身像</figcaption> </figure> <figure class="contents-item"> <img src="img/IMG_6639.jpeg"> <figcaption>笑顔</figcaption> </figure> <figure class="contents-item"> <img src="img/IMG_6669.jpeg"> <figcaption>22歳</figcaption> </figure> <figure class="contents-item"> <img src="img/IMG_6686.jpg"> <figcaption>実験中</figcaption> </figure> </div> </section>