Variable image aspect ratios in a square box - html

Question

I have a database for house listings with images of the homes for each entry. The images are uploaded by a 3rd party and they send images in random widths and lengths. Some are square-ish, some are portrait, some are landscape, etc. Without using javascript, what would be the best way to have the image completely fill a square div that is a definite size (200px by 200px, for example). I think using the image as a background image of each div and using "display: cover" would work great but not sure of any browser compatibility issues or maybe there is a better way. any suggestions?

Answer 1

If compatibility is what you care about, this is the best way to give everyone a decent experience:
div {
background-position: 50% 50%;
background-size: cover;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
img {
position: absolute;
max-width: 100%;
max-height: 100%;
left: calc(-2000px);
}
<div style="background-image: url(http://placehold.it/400x150)">
<img src="http://placehold.it/500x200" />
</div>
Basically, use background-size to scale where available, and show the image to all browsers that don't support calc. Two birds, one stone.

Answer 2

There are a few ways to do this, but I prefer using object-fit: cover, which is supported by all major browsers except IE. If you need a solution that works for IE and Edge, you can check out how to implement a fallback, or fall back to using background-size: cover.

Answer 3

Avoid explicitly defining the images' size. Instead use this:
max-width: 100%;
max-height: 100%;
JsFiddle Demo
OR if you want to use background-image then center it using:
background-position: center center;
background-size: cover;
JsFiddle Demo