モバイルで見た場合のロゴのサイズ変更方法

Question

私は携帯電話で見るとsiteのロゴを拡大しようとしていますが、コードは動作していないようです。私は無駄にこれの異なるバージョンを試してみた：

@media (max-width: 360px) { 
    .header-logo img { 
     max-width: 50%; 
     max-height: 50%; 
    } 
} 

Firebugのは、デスクトップバージョンのコードを表示しているように見えるので、私はさらに調整するかわからないんだけど。デスクトップビューでは何も変更したくありません。ちょうどモバイル。

フィードバックをいただければ幸いです。

Answer 1

はあなたがCSSで以下の変更を行うことができます

.header-logo img { 
    width: 100%; 
    height: 400px; 
    background-image: url('img_flowers.jpg'); 
    background-repeat: no-repeat; 
    background-size: contain; 
    border: 1px solid red; 
} 

Answer 2

これを試してみてください。以下のようにクラス.custom-logo-linkため360px変更スタイルプロパティのmax-widthで

.header-logo img { 
     max-width: 100%; 
     max-height: auto; 
    } 

Answer 3

、

@media screen and (max-width : 360px){ 
.custom-logo-link { 
    width: 50%; 
} 
} 

Answer 4

あなただけの幅を指定する必要があり、それが自動的に高さを調整します。

.header-logo img { 
    width: 100%; 
} 

Answer 5

これはばかげた質問かもしれませんが、ここで変更したいのは最大幅と最大高さですか？これらのパラメータは要素の高さと幅の上限を設定するだけです。

https://www.w3schools.com/CSSref/pr_dim_max-width.asp

おそらく、これらのいずれかを試してみてください？

@media (max-width: 360px) { 
    .header-logo img { 
    width: 50%; 
    height: 50%; 
    } 
} 

か：

@media (max-width: 360px) { 
    .header-logo img { 
    transform: scale(0.5); 
    } 
}