使背景圖像具有響應性

Question

試圖使我的可點擊背景圖片在所有設備上都具有響應能力，但似乎將我的頭纏住了。 在10英寸及以上的屏幕設備上顯示效果很好，但在較低的屏幕設備上，圖像被切掉了。我想使它在所有設備上都具有響應性。對此的任何注意都將受到贊賞。

使用的代碼如下：

 #range-logo { margin:0 auto; background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; display: block; height: 800px; width: 1240px; } @media only screen and (max-width: 767px) { #range-logo { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png); } } 

 <a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a> 

Answer 1

如果要在后台查看完整圖像，請使用contain屬性而不是cover 。

 *{ margin:0; padding:0; } body,html{ width:100%; max-width:100%; margin:0; padding:0; } #range-logo { margin:0 auto; background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; display: block; height: 100vh; width: 100%; } @media only screen and (max-width: 767px) { #range-logo { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png); background-size:100% 100%; } } 

 <a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a> 

Answer 2

好了，您可以在media query中將background-position更改為100% ，如下所示，效果很好，但這可以使您在移動設備上作為fixed background的圖像與其他設備上的其他視覺效果相比。

 body{ margin:0px; } #range-logo { margin:0 auto; background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; display: block; height: 800px; width: 1240px; } @media screen and (max-width: 767px) { #range-logo { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png); background-size:100% 100%; } } 

 <a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a> 

Answer 3

嘗試將其添加到您的媒體查詢中：

    @media only screen and (max-width: 767px) {
      #range-logo {
        background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
        background-size:contain;
      }
}