How to stretch small images inside a container preserving its aspect ratio?

Question

Let's say I have a 100x100 container which will be populated with different images via javascript. If the first image is e.g. 25x50, i want to display it inside the container centered at 50x100. Another image could be 50x25, but must be displayed at 100x50. Making a CSS with width=100% and height=100% would render all images to 100x100. How can I do that using CSS?

.container
{
    width: 100px;
    height:100px;
}

.image
{
    max-height:100px;
    max-width:100px;
    position: relative;
}

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

Set the image as a background image and use background-size: cover;

The other option is to check which side of the image is longer and set on that side to 100% and the other side to auto.

Determining image file size + dimensions via Javascript?

edited May 23 '17 at 12:12

Community

1
1

answered Sep 17 '14 at 22:12

Leeish

5,203
2
17
45

How to stretch small images inside a container preserving its aspect ratio?

1 Answers1