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

ensuring that multiple images in HTML have the same height and width, while fitting perfectly within their containers?

I want to make these images using css to be same height with perfect width and have no space between them and also i want them to look perfect

<div id="pic">
       <img src="images/model1.jpg" class="modelsimg">
       <img src="images/model2.jpg" class="modelsimg">
       <img src="images/model3.jpg" class="modelsimg">

anyone to help me with my problem

Tags:

2

Answers


  1. 0

    To make the images the same height with perfect width and no space between them, you can use CSS to style the images and their container. Here’s an example of how you can achieve this:

    #pic {
  display: flex; /* Use flexbox to align the images horizontally */
}

.modelsimg {
  flex: 1; /* Distribute available space equally among the images */
  height: auto; /* Let the images adjust their height proportionally */
  max-width: 100%; /* Ensure images don't exceed their original width */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}
    Login or Signup to reply.
  2. 0

    I am guessing that the intrinsic dimensions of the images will vary but you want them to be displayed with matching dimensions. This can be done with the object-fit property. Do you want the images to stretch to fit or have the edges cropped to fit?

    In this example using object-fit: cover, the shorter image is enlarged so that all images have the same height, and the left and right sides are cropped evenly to have matching widths.

    .pic {
    display: flex;
}

.pic img {
    object-fit: cover;
    width: 33.33%;
}
    <div class="pic">
  <img src="//placeholder.pics/svg/300x400" alt="300x400 picture">
  <img src="//placeholder.pics/svg/400x400" alt="400x400 picture">
  <img src="//placeholder.pics/svg/400x300" alt="400x300 picture">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search