如何在 html 和 css 中制作具有保留比率的高度和宽度响应图像？

Question

There exist many similar questions, but none has yet solved my requirements:

• Aspect ratio should be kept, AND
• Height responsive, AND
• Width responsive, AND
• Full image should always be seen within the browser window (ie the responsiveness should be with regards to the tightest dimension).

I have achieved these requirements, but not all of them in the same time. For example:

If I let the code below as it is with height="90%" width="auto" then it is height responsive but not width responsive.

If I change to height="auto" width="90%" then it is width responsive but not height responsive.

If I change to height="90%" width="90%" then it is both height and width responsive, but the ratio is not kept.

To test, please "Run code snippet" and check with "Full page" the situation by changing both height and width of the browser window.

 .test { height: 90vh; width: 90%; background-color: #222; color: #eee; padding: 2rem; }.test img { align-items: center; }

 <div class="test"> <img height="90%" width="auto" src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80"> </div>

I have tested in many different ways (eg with max-width, etc.) but not succeeded so far. Any idea how to change the above code so that all requirements are fulfilled simultaneously?

Answer 1

try this in your css:

.test img {
   object-fit: cover;
   width: 100%;
   height: auto;
}

Answer 2

You can use max-width and max-height together on the image then it will keep your aspect ratio and always fit on the screen with the complete image showing

 body { margin: 0; }.test { background-color: #222; color: #eee; padding: 2rem; height: 90vh; width: 90%; box-sizing: border-box; }.test img { margin: auto; display: block; max-width: 100%; max-height: 100%; }

 <div class="test"> <img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80"> </div>

Answer 3

Solution with use of aspect-ratio :

 :root { --imageWidth: 300; --imageHeight: 150; }.image-container { max-width: calc(var(--imageWidth) * 1px); max-height: 100%; aspect-ratio: var(--imageWidth) / var(--imageHeight); }.image { display: block; height: 100%; aspect-ratio: var(--imageWidth) / var(--imageHeight); }.resize-wrapper { display: inline-block; resize: both; overflow: hidden; border: 1px solid black; }

 <div class="resize-wrapper"> <div class="image-container"> <img src="https://placehold.co/300x150/svg" class="image" /> </div> </div>