I have to render images of any size in container which is 90 percent of the viewport. The viewport can have also any size, mobile, tablet, desktop, landscape, portrait, etc. I have to render the image in the container by keeping the aspect ratio but fit in the container, ie. either the height or the width of the image will be the same as of the container.
The solution should be
I tried the following simple code, but I don't understand, why the CSS entry object-fit doesn't work and why the image is out of the container on the right side and bottom side if the container is smaller as the image:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: fixed;
top: 5vh;
left: 5vw;
width: 90vw;
height: 90vh;
}
img {
object-fit: contain;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.diet-health.info/images/recipes/1400/salatgurke-schlangengurke-cucumber-by-rasbak-at-dutch-wikipedia.jpg">
</div>
</body>
</html>
Please have a look to aspect-ratio CSS3 attribute here:
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
I think this could be a good starting point:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: fixed;
top: 5vw;
left: 5vw;
width: 90vw;
height: 90vh;
}
img {
object-fit: contain;
margin: auto;
width: 100%;
aspect-ratio: 16/9;
}
</style>
</head>
<body>
<div class="container">
<img
src="https://www.diet-health.info/images/recipes/1400/salatgurke-schlangengurke-cucumber-by-rasbak-at-dutch-wikipedia.jpg" />
SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
</div>
</body>
</html>