Aligning three different images

HTML-CSS
1

Hello, I’ve been working on my tribute page and i’ve been trying to resize three different images so that they match and they could be aligned. https://codepen.io/focusk1ng/pen/vemPwX
i’ve set the same width and height for the three different images but nothing happens, they just won’t get aligned.
Help me, it’s been an hour and i’m turning crazy.

2

Try this. Replace the Bootstrap version you’re using with version 3, then do the following changes:

  • Create a <div> with container class.
  • Inside it, create another <div> with class row.
  • Inside it, create three <div>s with class col-sm-4.
  • Move each image inside each column <div>.
  • Add img-responsive class to the images.
  • Remove the inline styles from the images.

Also, <img> elements don’t need a closing </img> tag.

3

Thanks for the suggestion, i’ve followed your instructions but still the images are still sized differently.


I’ll try to play with the width and height commands and see if i can fix them.

4

Hey. One way to do that with Bootstrap 4 would be to have the images in a separate container with the img-fluid class (which is the new name for img-responsive in Bootstrap 4) overridden until a certain resolution, like so:

HTML

    <div class="container text-center">
      <div id="sonicimages" class="row">
        <div class="col-12 col-sm mb-3 mt-3">
          <img class="img-fluid" src="img_url">
        </div>
        <div class="col-12 col-sm mb-3 mt-3">  
          <img class="img-fluid" src="img_url">
        </div>
        <div class="col-12 col-sm mb-3 mt-3">
          <img class="img-fluid" src="img_url">  
        </div>
      </div>
    </div>

CSS

/* Override .img-fluid with fixed sizes */
.img-fluid {
  max-width:400px;
  height:200px;
}
/* Back to normal .img-fluid responsive sizes */
@media screen and (max-width:576px) {
  .img-fluid {
    max-width:100%; /* You can change this if you want the images to be smaller */
    height:auto;
  } 
}

When you use a breakpoint without number (as in col-sm) the columns will take space until there isn’t enough room anymore, then they’ll wrap on new lines. The mb\mt classes are just spacing classes. The text-center class on the container, will keep the images in the center of their container divs.

5

Thanks for your extensive answer, but if I were to use Bootstrap 3 replacing img-fluid with img-responsive would do the same trick?I’ll try and report back.
Alright, as you can see it kinda worked, but the Sonic R image extends itself a bit too much on the right. I’'ll try to play with the margins to fix it.Thanks a lot again.