2017-05-08 83 views
2

我正尝试让下面的图片,以适应整个DIV,这意味着背景图片应采取的整个空间,我不应该看到绿色。不幸的是,我找不到一种方法来做到这一点。填充在DIV容器HTML/CSS

#imagecontainer { 
 
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat; 
 
    border: 1px solid; 
 
    background-size: cover; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container no-padding" id="maincontent" tabindex="-1"> 
 
    <div id="imagecontainer" class="row"> 
 
    <div class="col-lg-12"> 
 
     <img class="img-responsive" src="img/profile.png" alt=""> 
 
     <div class="intro-text"> 
 
     <h1 class="name">Start Bootstrap</h1> 
 
     <h1 class="name">Start Bootstrap</h1> 
 
     <h1 class="name">Start Bootstrap</h1> 
 
     <hr class="star-light"> 
 
     <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

enter image description here

非常感谢!

+0

是'宽度'和'高度'100%? – AvrilAlejandro

+0

对不起,我的无知,你的意思是? –

回答

0

你使用container,使用container-fluid使其整个宽度。这里有一个demo

+0

感谢您的答案,但与容器液体图像被切断,我希望它是全部可见 –

+0

@AlbertoCarmona我已经更新了我的答案。你错过了身体的高度,我认为背景属性并不正确。 – Nofel

+0

that's伟大的宽度千恩万谢,但用什么高度发生什么呢?在您的示例中,即使添加更多文本,图片也会被剪切。有没有解决这个问题的方法?再次感谢! –

-1

#maincontent div有一个填充,正边距和宽度设置像素;和#imagecontainer具有负余量。

这是因为这是Bootstrap处理网格物品的方式。

您可以考虑使用流体Jumbotron来使用全宽,并为您的内容采取必要的垂直空间。

这可能是有帮助的:https://v4-alpha.getbootstrap.com/components/jumbotron/