使用引导程序进行图像定位

我遇到了有关我的代码的问题，我不知道我将在哪里或使用什么来解决问题。使用引导程序进行图像定位

这也表明我要像

看起来你可以看到上面的图片是不是太紧，我想看起来像在图像上比较有什么我的代码看起来像什么。我如何使下面的图片有任何想法？

这里是我的代码

CSS

.img-container { 
height: 500px; 
display: flex; 
} 

.img-big { 
background-image: url('/assets/icons/people-crowd-child-kid-large.jpg'); 
background-size: cover; 
flex: 1; 
} 

.img-small { 
display: flex; 
flex-direction: column; 
flex: 0 0 50%; 
} 

.img-small1 { 
background-image: url('/assets/icons/13-Cuidados-alternativos-en-  familia.jpg'); 
background-size: cover; 
flex: 50%; 
} 

.img-small2 { 
background-image: url('/assets/icons/man-person-cute-young-large.jpg'); 
background-size: cover; 
flex: 50%; 
}

HTML

<div class="row"> 
<div class="col-md-8 img-container"> 
    <div class="img-big img-responsive"></div> 
</div> 
<div class="col-md-4 img-small"> 
    <div class="img-small1"></div> 
    <div class="img-small2"></div> 
</div>

来源

2016-03-08 Brian

你为什么设置了图像作为背景图像，而不是'img'元素？如果你想这样做，你需要为这些元素指定高度和宽度，否则它们将被视为0，这就是为什么你没有看到它们。 – APAD1

你**必须**设置元素的高度和宽度，如果它们像你的例子那样是空的。 – Jay

真的是男人吗？你能给我举个例子吗？让我试试 – Brian

而不是设置图像作为背景的图片，将它们设置为img元素：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-8 img-container"> 
 
    <img class="img-responsive" src="http://placehold.it/1000x500" /> 
 
    </div> 
 
    <div class="col-md-4 img-small"> 
 
    <img class="img-responsive" src="http://placehold.it/250x250" /> 
 
    <img class="img-responsive" src="http://placehold.it/250x250" /> 
 
    </div> 
 
</div>

来源

2016-03-08 16:36:51 APAD1

我会在哪里宣布身高？我试图在图像本身，但没有效果。和关于img-container和img-small的css是不是覆盖任何元素来适应图像？它向左滚动滚动条，我该如何摆脱它？ – Brian

这样做时不需要定义高度。图像的高度决定了包含元素的高度。 – APAD1

好吧好吧，我只需要调整图像大小。非常感谢 – Brian

-2

<div class="row"> 
<div class="col-md-8 img-container"> 

<img class="img-responsive" src="location/filename.jpg"/> 
</div> 
<div class="col-md-4"> 
<img class="img-responsive" src="location/filename.jpg"/> 
<img class="img-responsive" src="location/filename.jpg"/> 
</div>

来源

2016-03-08 16:42:52 Harsha

使用引导程序进行图像定位

回答

相关问题