画像の高さを揃えたい

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

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