圖像不完全響應

我使用Bootstrap並具有圖像1920x1280。它目前只能響應1000px左右的寬度，並停止從那裏收縮。寬度低於1000像素，它開始切斷圖像的一側。我需要在任何設備上顯示完整圖像。我通過CSS背景網址添加圖片。有沒有解決的辦法。添加了下面的相關代碼。圖像被放置在ID'intro'中。圖像不完全響應

圖片

HTML

<div id="intro"> 
    <div class="intro-body"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <h1 style="color: #000000">Title<span class="brand-heading">Quote</span></h1> 
      <p style="color: #000000" class="intro-text">Short description</p> 
      <a href="#about" class="btn btn-default page-scroll">Learn More</a> </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS

#intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: #fff; 
    background: url(../img/intro-bg.jpg) no-repeat center center fixed; 
    background-color: #000; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#intro .intro-body { 
    display: table-cell; 
    vertical-align: middle; 
} 
#intro .intro-body H1 { 
    font-size: 76px; 
    font-weight: 700; 
    color: rgba(255,255,255,0.8); 
    text-transform: uppercase; 
} 

@media(min-width:768px) { 
#intro { 
    height: 100%; 
    padding: 0; 
} 
#intro .intro-body .intro-text { 
    font-size: 18px; 
    letter-spacing: 1px; 
    margin-bottom: 100px; 
    color: rgba(255,255,255,0.9); 
} 
}

來源

2017-05-07 kar

以下只是一個說明，並沒有任何與你的問題：3位十六進制顏色值都在一些老版本的IE瀏覽器的越野車。 – Pyromonk

請試試這個風格，而不是你的id介紹。有兩種方法。一個是固定的高度和寬度，另一個沒有寬度和高度。

#intro{ 
     width: 100%; 
     height: 400px; 
     background-image: url('../img/intro-bg.jpg'); 
     background-size: 100% 100%; 
     border: 1px solid red; 
    }

或

#intro{ 
background-image:url('../img/intro-bg.jpg'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center; 
}

來源

2017-05-08 02:55:38

背景尺寸：蓋;嘗試填充所有背景空間，因此可能會截斷圖像的邊緣。如果您將完全顯示圖像而沒有切斷集背景大小到包含。

background: url(../img/intro-bg.jpg) no-repeat right bottom scroll; 
background-color: #31f1fd; 
-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain;

來源

2017-05-07 07:59:36

包含確保圖像完全可見，但它使圖像更小，其邊上有黑色邊框。 – kar

background-color：＃000;造成黑色邊框。我更改了代碼，請重試。 @kar –

你是對的，它是背景顏色。但圖像響應問題幾乎相同。在1000px的寬度後，圖像開始切斷。在768px處，圖像再次完全可見。低於這個寬度，開始再次切斷。 – kar

圖像不完全響應

回答

相關問題