Responsive imgs of different widths with same height

Question

I'm not sure exactly how to phrase what I need, but basically I have three different images that I'd like to remain the same ratio, but they aren't the same size. I guess it looks like this: |------| |----------| |--| | Img1 | | Img2 | | 3| |------| |----------| |--|

And have them scale responsively. Here's the HTML and CSS:

    @media all and (max-width: 775px) {
     .aboutbody, .sidebar {
      display: block;
     }
    
     .sidebar {
      width: 86%;
      margin-left: 7%;
      height: 300px;
     }
    
     .sidebarpics {
      height: 200px;
      width: auto;
      display: inline-block;
     }
    }

    <div class="sidebar">
        <img class="sidebarpics" img src="assets/family1.jpg">
        <img class="sidebarpics" src="assets/speaking1.jpg">
        <img class="sidebarpics" src="assets/family2.jpg">
    </div>

Here's the website that I'm updating in real time. http://hanksmith.com/about.php To understand you need to shrink the browser window until the three pictures at the side move to the top.

Answer 1

Try vertical alignment top . ignore playing with height, play with width in percentage.

 @media (max-width: 775px){
.sidebarpics {
    max-width: 32%;
    width: auto;
    display: inline-block;
    vertical-align: top;
    max-height: 100px;
}
}

Answer 2

use flex

.sidebar {
     display: flex;
}

and give each image a percentage width.

See fiddle

Answer 3

I would suggest giving them a percentage width, to each child there own width to make them take the available space.

Something like this:

.sidebarpics:nth-child(1)
{
    width: 18%;
    height: auto;
}

.sidebarpics:nth-child(2)
{
    width: 36%;
    height: auto;
}

.sidebarpics:nth-child(3)
{
    width: 40%;
    height: auto;
}

Answer 4

Since you using @media query to share your images. You can share their width in %

Try doing this

@media all and (max-width: 775px) {
.aboutbody, .sidebar {
    display: block;
}

.sidebar {
    width: 86%;
    margin-left: 7%;
    height: 300px;
}

.sidebarpics:first-child  {
    height: 200px;
    width: 30%; /*share the two imgs to any % you like*/
    float: left;
    display: inline-block;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 70%;
    float: left;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

@media all and (max-width: 600px) {
.sidebarpics:first-child  {
    height: 200px;
    width: 100%;
    float: none;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 100%;
    float: none;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

Answer 5

In your case the aspect ratio is the problem.

There are many solutions to it but i would suggest using 3 small versions and show them instead of them on smaller screens. If you like the idea then i can write you some code.

Answer 6

You can just limit max-width for every image:

@media (max-width: 775px) {
  .sidebarpics {
     max-width: 32%;
     display: inline-block;
  }
}

Answer 7

It is difficult to manage the following:

• keeping ratio of images individually
• all the same height
• not cutting anything of the image

If the last point is something you can get away with, I'd suggest the following. Use a defined height on the parent container, and overflow: hidden; to cut off everything above the height. The images are aligned to the top and have a max-width, to make sure they fit next to each other. If you don't mind upscaling, use width instead.

.sidebar {
    height: 300px;
   overflow: hidden;
}
.sidebar img {
    display: inline-block;
    vertical-align: top;
    max-width: 33%;
}