CODEWITHSUNDEEP
htmlcsstwittertwitter-bootstrap-3
Brian
Brian

Reputation: 25

Image positioning using Bootstrap

I'm having a problem about my code i don't know where or what will i use to fix the problem.

It shows what my code looks like and what i want to be looks like

enter image description here

As you can see the image above is not tight compare on the image that i want to looks like. How can i make the below picture any idea?

Here is my codes

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>

Upvotes: 0

Views: 320

Answers (1)

APAD1
APAD1

Reputation: 13666

Instead of setting the images as background images, set them up as img elements:

<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>

Upvotes: 2

Related Questions