0

I have standards for image size as width: 640px, height 360px to resize an image. And I want to preserve the ratio of an image.

In the case of original image size is larger than the standard, it has to be shrink to width 640px or height 360px, otherwise, it has to be stretched.

I think css should be something like this:

img {
  max-width: min({{original image width}}, 640px) 
  max-height: min({{original image height}}, 360px) 
  min-width: max({{original image width}}, 640px) 
  min-height: max({{original image height}}, 360px) 
}

Is there any ways to fit this condition?

Yogno
  • 1
  • Yongo, Could you please provide a bit of clear detail about your question?like If you please provide some more detail so that it is easy to understand? – Rafia Zafar Oct 28 '21 at 09:32
  • Try using this solution, in your case, it might help [link](https://stackoverflow.com/questions/24197730/css-image-max-width-set-to-original-image-size/24198922) – Rafia Zafar Oct 28 '21 at 09:45
  • That can be done using object-fit and aspect-ratio, check the docs for these attributes – tony Oct 28 '21 at 10:25

1 Answers1

0

You can use object-fit to scale the image to your needs.
Read in detail here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Deitsch
  • 1,610
  • 14
  • 28