CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
Brian
Brian

Reputation: 25

Two small align images beside a large image

I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?

this is the image I need to make.

Click here

HTML and CSS code:

    .img-big{ height: 100%;width: 100%; }
    <div class="row col-md-8">
    <img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
    </div

the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767

Upvotes: 2

Views: 3008

Answers (3)

Ben Clarke
Ben Clarke

Reputation: 1061

You should format your code like below:

 <div class="row">
        <div class="col-md-8">
            <img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div> 
        </div>
        <div class="col-md-4">
             <img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
             <img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
        </div>
    </div>

As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.

You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)

With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?

Upvotes: 1

askdesign
askdesign

Reputation: 11

In Bootstrap 5, you can use d-grid gap-x. For example:

HTML

.content {
    background-color: transparent;}

     .content .left, .content .right {
    float: left;}

    .full-width-band-hd {
    margin-top: -35px;}

    .txt-yellow {
    color: var(--bs-yellow);}
<section class="container-lg">
        <div class="content row">
              <h2 class="txt-yellow full-width-band-hd">Head</h2>
            <!-- Left Side -->
              <h6 class="text-yellow">H6 head</h6>            
              <h3 class="text-yellow">H3 head</h3>
        </div>
        <!-- style in content row will become a class later-->
        <div class="content row" style="height: 642px;">
          <div class="col-md-4 left d-grid gap-3">
            <div class="">
                <img src="image1" width="100%" height="auto" alt="fp1">
              </div>
              <div class="">
                <img src="image2" width="100%" height="auto" alt="fp2">
              </div>
          </div>
          <!-- End of Left Side -->
          <div class="col-md-8 left">
            <div class="">
              <img src="image3" width="100%" height="auto" alt="fp3">
            </div>

          </div>
        <!-- End of col-md-8 -->

        </div><!-- content row -->
    </section>

Upvotes: 1

Roy
Roy

Reputation: 8069

You can use the flexbox property to achieve what you want and set the image as background.

body, html {
  margin: 0;
  padding: 0;
  color: white;
}

.container {
  height: 767px;
  display: flex;
}

.left {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  flex: 1;
}

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

.one {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  flex: 50%;
}

.two {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  flex: 50%;

}
<div class="container">
  <div class="left">Left image</div>
  <div class="right">
    <div class="one">First image</div>
    <div class="two">Second image</div>
  </div>
</div>

Upvotes: 2

Related Questions