Fill a div with an image respecting aspect ratio

Question

Is it possible to fill a div with an image such that at least one image dimension is 100% and the other dimension is either wider or equal size as the div, whilst r

Answer 1

This is not the exact solution, but it could be an implementation that you could try to make your code work. Here is an example:

As you can't predict the aspect ratio of the image here is what I would do:

HTML: Set the div tag to 'fill':

CSS: This will place your image as the background, and stretch it to fit the div size without distortion.

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image:"path/to/image.jpg";
}