html - CSS content based layout -

i'd style popup (magnific popup) css. it's content generated via ajax , contains image , text. if image in landscape orientation, looks nice, in portrait orientation doesn't fit @ all, because image scaled width: 100%. popup classes doubled, e.g. popupcontainer0 , popupcontainer1, n

how fit this? searched lot , tried lot, won't want to.

i made image shows proportions want have. put relevant part of document tree graphic make clear, how did landscape images.

you need add orientation specific styles. following media queries same

@media screen , (orientation: portrait) {     // add portrait styles here }  @media screen , (orientation:landscape) {     // add landscape styles here } 

additionally, can add width specific styles like

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