CSS oriented layout

Question

I would like to create a popup window (magnific popup) using CSS. This content is created through AJAX and contains an image and some text. If the image is in landscape orientation, it looks very beautiful, but in portrait orientation it does not fit at all, because the image is scaled with width: 100%. Popup classes double, for example. popupcontainer0 and popupcontainer1, n

How would I put this? I searched a lot and tried a lot, but it will not look the way I want.

I made an image that shows the proportions that I want to have. I also placed the corresponding part of the document tree in the graphics to clarify how I made the landscape images.

Answer 1

. -

@media screen and (orientation: portrait) {
    // add your portrait styles here
}

@media screen and (orientation:landscape) {
    // add your landscape styles here
}

, ,

@media screen and (max-device-width : 480px) and (orientation: portrait) {
    // your styles here
}