CSS to show and align images

HTML & CSS
1

Hi,

I have created a horizontal UL:

<ul>
<li>
<div id="mydiv">
<div class="image" style="background-image: url('image1.jpg')"></div>
<div class="name">Student1</div>
<div id="rollNo">S_ID003</div>
</div>
</li>

<li>
<div id="mydiv">
<div class="image" style="background-image: url('image2.jpg')"></div>
<div class="name">Student2</div>
<div id="rollNo">S_ID002</div>
</div>
</li>

<li>
<div id="mydiv">
<div class="image" style="background-image: url('image3.jpg')"></div>
<div class="name">Student3</div>
<div id="rollNo">S_ID003</div>
</div>
</li>
</ul>

The CSS:

.image {
background-size:100% auto;
width:100%;
height: auto;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
/*    background-size: cover;*/
position: absolute;
display: inline-block;
}

The images are not uniform in dimensions. They are like square or rectangle or vertical. I want to be able to display the images in a square and the entire image has to be displayed, not cropped. How can I achieve this?

Thanks.

2

How would you prefer to display the rectangular image in a square space?

Squish to fit.
Stretch to fit.
Pad to fit.

3

Hey thanks for your reply.

I guess Stretch to fit can do. Can I compare them?

Thanks again.

4

You’ll need to experiment for yourself with your images to know for sure if the distortion is acceptable.
To me a few pixels either way isn’t noticeable. But I don’t have an artists eye.

The original image dimensions here are width=“325” height=“112” and the distortion is IMHO unacceptable - I would Crop or Pad instead.

544×528 46.6 KB

5

Thanks,

I’ll go for the stretched one. How do I go about it?

6

Note that the full-weight image will be downloaded.
But it’s a simple matter of specifying the width and height values that you want

<figure>
<img src="./images/afterhomer.png" width="325" height="112" alt="original">
<figcaption>original</figcaption>
</figure>
<figure>
<img src="./images/afterhomer.png" width="325" height="325" alt="stretched">
<figcaption>stretched</figcaption>
</figure>
<figure>
<img src="./images/afterhomer.png" width="112" height="112" alt="squished">
<figcaption>squished</figcaption>
</figure>
7

Hi,

I cannot specify the width and height as the entire Div needs to be responsive.

8

They have to be specified if you want it to display at a different size from the original. In the CSS you can specify them using em or % - they don’t need to be defined in px.

2 Likes
9

The width and height attributes should be included in the HTML whenever possible. Not omitted.

10

If your images are pictures of something (like people or places) then please do not squish or stretch them as that is very amateurish and hated by web users. If the images are just decoration or design patterns then yes you can squish them as no one will know they have been changed.

Think carefully about this and think carefully about the logistics of what you are asking.

In order to maintain the correct aspect ratio you need to use ‘background-size:cover’ (assuming background images). This will control the aspect ratio while filling the div but of course there may be portions of the image now outside the viewable area.

Lastly remember that images in the html are considered content and should the images be decoration they should remain as background images.

In the end its just a matter of basic math and you can’t fit a square peg in a round hole.:slight_smile:

If we could see your images we may be able to say what is the best approach for those types of images.

4 Likes
11

Thanks. I followed: https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

I removed the background color property from the tut and am able to achieve what I wanted.

I will put a modal to inform the users to upload a square like image as far as possible to avoid it looking ugly when stretched.

Thanks again!

12

No disrespect to Craig Buckler but that article is from Nov 2013.

Seems to me it would be easier to use contain / cover depending on whether one wanted to strictly maintain a shape at risk of losing a few pixels (due to overflow hidden) or retain all the image at risk of the shape.

* what I called Pad looks to be more appropriately called “letterboxed”.

The same 325x122 image in a 220x220 square

.with-background-img {
  background-image: url(./images/afterhomer.png);
  width: 220px;
  height: 220px;
}
.covered {
  background-size: cover;
}
.contained {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

1 Like
13

That technique simply does what background-size:cover does for background images and is basically the approach I recommended.:slight_smile: (You could have used ‘object-fit:cover’ for foreground images instead but IE has no support yet.)

The technique makes sure that an image is always bigger (or as big) than the area that you want it to fit into and then hides the overflow. It does not change the aspect ratio and so the images look ok although some parts will be outside the viewing area.

1 Like
14

In which case IE never will because IE11 now only receives technical and security support - so whatever functionallity IE doesn’t support will now never be added to IE as no version of IE is still receiving updates to support new functionality.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.