Question 326238 in Html Question posted in
Some basic documentation can be found here.

Html – How to make images the same size with CSS?

I want my 3 images to be the same size, but width/height styles aren’t helping, because when I set the same size for all images, all 3 images keep their aspect ratio and they look horrible.

What I got:
What i got

What want to get:
What i want to get

.social {
  display: flex;
}

.items_soc {
  height: auto;
  width: 50px;
  object-fit: cover;
  /* filter: brightness(0%) invert(100%); */
}
<div class="social">
  <img class="items_soc" src="https://via.placeholder.com/100x150" />
  <img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
  <img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>
Tags:

2

Answers


  1. 0

    Object fit works the best when you have a constant aspect ratio.
    Change the code to

    .social {
  display: flex;
}

.items_soc {
  height: 50px;  /* Set the desired height */
  width: 50px;  /* Set the desired width */
  object-fit: cover;
  /* filter: brightness(0%) invert(100%); */
}
    <div class="social">
  <img class="items_soc" src="https://via.placeholder.com/100x150" />
  <img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
  <img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>
    Login or Signup to reply.
  2. 0

    I see what is your problem and if you want them be the same height and width it will be dependent if you want it vertical or horizonal order for the method I will stating.

    For this you must enclose each image within the <div> element. Once you have done that you can use CSS to declare the specifics for its height and width. You can use the style attribute within the div opening tag. style = "width : 100px; height: 100px;" . It follows the same rules.

    Then you can insert your images with its sources. Their aspect ratio should stay the same and fit within the div.

    <!DOCTYPE html>
<html>
<body>
<div style = "width: 1000px; height: 50px;">
<img class="items_soc" src="https://via.placeholder.com/100x150" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x150/aaa" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x100" style = "height: 50px; width: auto;"/>
</div>
</body>
</html>

    This is more for list and rosters but you can also just try to have a height value and have the width as auto instead.

    <!DOCTYPE html>
<html>
<body>
<img class="items_soc" src="https://via.placeholder.com/100x150" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x150/aaa" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x100" style = "height: 50px; width: auto;"/>
</body>
</html>

    Same result, different use case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search