画像の高さを揃えたい

元の画像の大きさは同じなのに右側の画像のみ高さが小さくなってしまってズレてしまいます。
添付画像の赤のラインのところで揃えたいです。
個別にサイズを調整して揃えるしかないのでしょうか？

HTML
1<body>
2  <section id="bicycle" class="wrapper">
3    <h2 class="section-title">Bicycle</h2>
4    <ul>
5      <li>
6        <img src="http://placehold.jp/150x150.png" alt="テキストテキストテキスト">
7        <h3 class="content-title">タイトルタイトル</h3>
8        <p>テキストテキストテキスト</p>
9      </li>
10      <li>
11        <img src="http://placehold.jp/150x150.png" alt="テキストテキストテキスト">
12        <h3 class="content-title">タイトルタイトル</h3>
13        <p>テキストテキストテキスト</p>
14      </li>
15      <li>
16        <img src="http://placehold.jp/150x150.png" alt="テキストテキストテキスト">
17        <h3 class="content-title">タイトルタイトル</h3>
18        <p>テキストテキストテキスト</p>
19      </li>
20    </ul>
21  </section>
22</main>
23
24
25 </body>
26</html>

css
1
2*{
3    margin: 0;
4    padding: 0;
5}
6
7a {
8  text-decoration: none;
9}
10img {
11  max-width: 100%;
12}
13li {
14  list-style: none;
15}
16
17.section-title {
18  display: inline-block;
19  font-size: 2rem;
20  text-align: center;
21  margin-bottom: 60px;
22  border-bottom: solid 1px #383e45;
23}
24
25.wrapper {
26  max-width: 960px;
27  margin: 0 auto 100px auto;
28  padding: 0 4%;
29  text-align: center;
30}
31
32.content-title {
33  font-size: 1rem;
34  margin: 10px 0;
35}
36
37#bicycle ul {
38  display: flex;
39  justify-content: space-between;
40}
41#bicycle li {
42  width: 32%;
43}
44
45
46@media screen and (max-width: 600px){
47
48
49
50#bicycle ul {
51  flex-direction: column;
52}
53#bicycle li {
54  width: 100%;
55  margin-bottom: 30px;
56}
57
58}

itagagaki

2021/10/31 05:16

高さを揃えたいのではなく下揃えにしたいということですか？

misaki.

2021/11/01 04:55

そうです。説明不足ですみません。

itagagaki

2021/11/01 09:09

提示のコードではそもそも横並びにならないようです。そこから調べるのは無駄ですので、現状を再現できるコードを提示してください。

misaki.

2021/11/02 05:48

コードを全て書き直しました。手本にしているサイトのコードのままなのですが、これでも自分の画像を使うと右側の画像は添付画像と変わらなかったです。

itagagaki

2021/11/06 15:59

ここでのお答えとLhankor_Mhyさんの回答へのコメントとで話が食い違っているようですが、どうなのですか？

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

回答1件

フレックスレイアウトだと難しそうなので、グリッドレイアウトをおすすめします。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/qa1bepo0/

css
1
2img {
3    max-width: 100%;
4    grid-row: 1;                             /* 追加 */
5    align-self: end;                         /* 追加 */
6}
7
8.content-titie {
9    grid-row: 2;
10}
11
12#bicycle ul {
13    display: flex;
14    justify-content: space-between;
15    display: grid;                           /* 追加 */
16    grid: auto auto auto / auto auto auto;   /* 追加 */
17    justify-items: center;                   /* 追加 */
18}
19
20#bicycle li {
21    width: 32%;
22    display: contents;                       /* 追加 */
23}
24

投稿2021/11/02 01:29

編集2021/11/02 01:30

Lhankor_Mhy

総合スコア36163

misaki.

2021/11/02 05:49

ありがとうございます。下揃えは出来ましたが、今度は上が揃わなくなりました。

Lhankor_Mhy

2021/11/02 05:56

補足依頼欄で、高さを揃えたいのではなく下揃えにしたいということ、という話ではなかったですか？高さを揃えたいのですか？

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像の高さを揃えたい

関連した質問