图像不完全响应

我使用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

图像不完全响应

回答

相关问题