Home>

If there is a landscape image
I want to display an image in full length and width (centering and trimming) on ​​both a PC and a smartphone.
*If the width is 100%, the extra parts are cut off at the top and bottom, and if the width is 100%, the left and right extra parts are cut off.

Trimming with "100% width" and "100% height"
I can implement each css,

I do not know how to switch depending on the aspect ratio of the window, so I asked a question here.
It is possible to switch by making a media query, but is it possible to switch by the aspect ratio of the window?

I thought that I could get the aspect ratio with jquery and change it with that.
I couldn't quite find it even after examining it. .. ..

If anyone knows, I would be happy if you could teach me.

Thanks for your cooperation.

  • Answer # 1

    object-fit: cover;I think it can be done.

    [Object-fit-CSS: Cascading Style Sheets | MDN]
    https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

    If you want to switch depending on the aspect ratio of the window@media (aspect-ratio: 1/1)Such.

    [Aspect-ratio-CSS: Cascading Style Sheets | MDN]
    https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio

Related articles