移動img頭按下文本

我想編輯我的WordPress主題。我將標題h1更改爲img以顯示徽標。它在計算機上看起來很好，但在移動設備上，它做了一些奇怪的事情，以便背景圖像通過徽標和導航欄之間顯示。移動img頭按下文本

您可以查看這裏：http://www.juicecrawl.com/blog

如何，因此既適用於計算機&移動縮放徽標圖像的任何想法？

謝謝！

2015-10-07 Turnipdabeets

在小的分辨率，你的CSS正在萎縮的背景圖像的大小以適應屏幕上。你可以在標題區域中設置背景大小爲'cover'，或者將背景圖像設置爲'none'以擺脫移動。你也想讓你的標誌響應。首先從「img」中刪除高度=「100px」，然後使用css代替。

/*set height of the image to 100px*/ 
.site-header h1 img {height:100px;} 
/*for mobile, set background-size to cover and set the logo to have a max width of 100% so that it fits on the screen*/ 
@media (max-width: 359px) { 
    .site-header { 
    background-size: cover; 
    } 
    .site-header h1 img {max-width:100%;height:auto} 
}

來源

2015-10-07 04:23:15 partypete25

謝謝，我正在使用主題 - 子.css進行編輯，並且當我將此代碼複製到子css中時，它似乎無法覆蓋主題設置。我沒有看到變化。 – Turnipdabeets

好吧，我可以在你的「twentytheeneen-child/style.css」文件中看到它。問題是它正在被關閉標籤之前被其他css覆蓋。 – partypete25

現在，除非您在關閉標籤之前瞭解如何編輯該css，否則請在css上使用「！important」。例如.site-header h1 img {max-width：100％！important; height：auto！important} – partypete25

將媒體查詢中的.site-header的background-size更改爲cover而不是768px auto。

@media (max-width: 767px) { 
.site-header { 
    // background-size: 768px auto; 
    background-size: cover; 
} 
}

來源

2015-10-07 04:13:18 ToskaMan

移動img頭按下文本

回答

相關問題