liのサイズに合わせて画像サイズを変更したい

Question

前提

全体の横幅=50%ずつでliのleftとrightを表示し、rightの中に画像を横幅にあわせて表示したいと考えております。
現状、画像のリサイズが行われずにフルサイズが表示され、leftが[全体の横幅]ー[画像のフルサイズ]の幅に押し込まれて表示されます。
rightのimgをコメントアウトすると、leftとrightが50%ずつで表示されます。
rightの画像が全体の横幅=50%に合わせて表示できない理由はどこにあるのでしょうか。

該当のソースコード

    <section id="column">
    <div class="container section">
        <ul class="ul_column">
        <div class="container inner">
            <li class="left">
            <div class="sec-title">
                <div class="tri_up">
                <img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/column_tri_up.png" alt="tri">
                </div>
                <div class="left_column">
                    <div class="sec-title">
                        <h2 class="title-en">COLUMN</h2>
                        <h3 class="title-jae">コラム</h3>
                    </div>
                    <div class="des">お役立ち情報を配信中 。</div>
                    <div class="btn_column"><a class="readmore" href="<?php echo esc_url(get_post_type_archive_link('case')); ?>"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/common/btn-readmore.png" alt="read more"></a></div>
        </div>
                    <div class="tri_bottom">
                <img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/column_tri_bottom.png" alt="tri">
                </div>
                </div> </li>

                <li class="riglt">
            <div class="right_image">
                <img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/column_image.png" alt="">
            </div>
        </li>
            </div></ul>
        </div>
    </section>

#column {
    background: white
}

#column .section {
    background: white;
    display: flex;
    align-items: center;
    padding: 18px 18px;

}

#column ul.ul_column {
    display: flex;
    width: 100%;
}
#column .section .sec-title {
    display: flex;
    flex-flow: column;
}
#column ul.ul_column li.left{
    width: 50%;
height: 100%;
display: flex;
background: #ebe7e1;
flex-flow: column;
}

#column ul.ul_column li.right .right_image {
    position: relative;
    overflow: hidden;
    padding-top: 60%;
    margin: 10px 5px;
}

#column ul.ul_column li.right .right_image img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#column .section .inner {
    display: flex;
    align-items: center;
    width: 100%;
}

Answer 1

img要素の幅を指定していないので、オリジナルのサイズで表示されます。
親要素の幅に合わせたいなら、幅を100%に指定しましょう。

#column img {
    width: 100%;  
}

Comments

[scottie320]

下記コードにて指定している認識です。
また、いただいたコードを試しましたが、変わりませんでした。
```
#column ul.ul_column li.right .right_image img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
object-fit: cover;
}
```

[hatena19]

クラスのタイポですね。
<li class="riglt">
これを
<li class="right">
になおしましょう。
ただし、これをすると画像の幅は0になるので別の設定が必要になります。

たぶん、下記でご希望になるかな？
#column ul.ul_column li.right {
width: 50%;
}

[scottie320]

タイポでしたか…。指摘ありがとうございます。
下記コードで実装できました。回答ありがとうございました。
```
#column ul.ul_column li.right {
width: 50%;
display: flex;
height: 100%
}

#column ul.ul_column li.right img{
height: 100%;
object-fit: cover
}
```