スマホ表示時に画像を横幅いっぱいに広げたい

Question

スマホの表示時に縦並びにした画像を横幅いっぱいに広げたいです。

メディアクエリのmax-width:600px;が効かないのはなぜでしょう。。
HMTLのimgに画像のサイズを指定しているのがよくないのでしょうか。

ご教授お願い致します！

　　　　<div class="bicycle">
            <div class="con">
                <div class="con2">
                    <img src="img/bicycle1.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
                    <h3>タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </div>

                <div class="con2">
                    <img src="img/bicycle2.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
                    <h3>タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </div>

                <div class="con2">            
                    <img src="img/bicycle3.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
                    <h3>タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </div>
            </div>
        </div>

.bicycle .con{
    display: flex;
    justify-content: center;
    align-items: center;
}

.bicycle .con2{
    width: 268px;
    margin-right: 17px;
    text-align: center;
} 


@media(max-width:600px ){
    .bicycle .con{
        flex-direction: column;
    }

    .bicycle .con2{
        max-width: 600px;
        height: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
}

Answer 1

HTMLでimgタグにwidth="268px" height="176px"を記述しているので、画像のサイズはメディアクエリにかかわらずそのサイズになってしまいます。
その指定は削除し、幅601px以上のデバイスに対しては

@media(min-width:601px){
    .bicycle .con2 img{
        width: 268px;
        height: 176px;
    }
}

としておいて、幅600pxまでのデバイスに対しては

@media(max-width:600px){
    .bicycle .con2 img{
        width: 100vh;
    }
}

を加えたらどうでしょうか。

vhという単位についてはこちらを参考にしてください。
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO

Comments

[kumazou]

いつもありがとうございます！！
その通りにやってみたらできましたー！
HTMLにサイズを記述したらCSSで調整できなくなるんですね。覚えておきます！