移動

Question

我一直試圖在手機查看，但沒有代碼似乎工作時，擴大我們site的標誌看時如何調整的標誌。我試過不同的版本，但無濟於事：

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

我不知道該怎麼進一步調整，因爲螢火蟲似乎針對桌面版本中顯示的代碼。我並不想在桌面視圖上改變任何東西。只需移動。

將不勝感激任何反饋。

Answer 1

嘗試了這一點

.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

您可以在CSS下面的變化。

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

Answer 3

在360px改變樣式屬性.custom-logo-link如下類的max-width，

@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); 
    } 
}