ロゴ画像のレスポンシブ表示

  • 解決済 9-taro

    (@9-taro)


    5年、 10ヶ月前

    お世話になります。初歩的なレベルの質問で恐縮です。
    サイトのロゴをレスポンシブ画面で表示する際、
    パソコン用の表示より、80%のサイズで表示したいのですが、
    うまくいかず困っています。
    以下、cssの表記です。ご教示いただければ幸いです。

    logo.gif

    img {
    width:100%;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    }

    #logo{
    width: 100%;
    max-width:170px;
    height: auto;
    }

    @media screen and (min-width: 783px) {
    #logo{
    width: 100%;
    height: auto;
    }

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • DRILL LANCER

    (@rickaddison7634)

    5年、 10ヶ月前

    1つ質問いいですか？
    現状ではmax-width:170px;はスマホとPCの両方に適用されると思うのですが・・・

    PCは 170px の 1.25倍（ 1 / 0.8 = 1.25 ） の 212.5px で表示したいのですか？
    それとも、PCが 170px で、スマホはその 80% の 136pxですか？

    トピック投稿者 9-taro

    (@9-taro)

    5年、 10ヶ月前

    ご回答ありがとうございます。
    PCが 170px で、スマホはその 80% の 136pxで表示したいです。
    すいません。スマホの数値が100%になってました。

    @media screen and (min-width: 783px) {
    #logo{
    width: 80%;
    height: auto;
    }

    よろしくお願いします。

    DRILL LANCER

    (@rickaddison7634)

    5年、 10ヶ月前

    下記コードでいかがでしょうか？

    img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#logo{
    width:136px;
    height: auto;
}

@media screen and (min-width: 783px) {
    #logo{
        width: 170px;
        height: auto;
    }
}

    P.S.
    min-width: XXXpx は 画面が XXXpx 以上のときに適用されるので、
    上記コードの場合、783px 以上なら max-width: 170px;が 782px 以下なら max-width:136px; が適用されます。
    783px はおそらく、スマホとタブレットの境界線だったと思います。
    タブレットもスマホと同じ表示にしたい場合はmin-width: 992pxあたりが良いと思います。

    P.P.S
    <img id=logo src="">とか<div id=logo><img src=""></div>htmlに応じてCSSが変わってくると思います。

    • この返信は5年、 10ヶ月前にDRILL LANCERが編集しました。
    • この返信は5年、 10ヶ月前にDRILL LANCERが編集しました。
    トピック投稿者 9-taro

    (@9-taro)

    5年、 10ヶ月前

    RICK様

    親切丁寧なご回答ありがとうございました。
    ご指摘の通り修正しましたら、問題なく画像の大きさが変わりました。
    全く見当違いの事をやってました。
    ご協力感謝します。
    また機会がありましたら、よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ロゴ画像のレスポンシブ表示」には新たに返信することはできません。