Основание на основе CSS CSS

Question

Я хотел бы создать всплывающее окно с возможностью увеличения. Это контент создается через AJAX и содержит изображение и некоторый текст. Если изображение находится в альбомной ориентации, оно выглядит очень красиво, но в портретной ориентации оно совсем не подходит, потому что изображение масштабируется с помощью width: 100%. Классы всплывающих окон удваиваются, например. popupcontainer0 и popupcontainer1, n

Как бы я поместил это? Я много искал и много пробовал, но он не будет выглядеть так, как я хочу.

Я сделал изображение, которое показывает пропорции, которые я хочу иметь. Я также поместил соответствующую часть дерева документов в графическое изображение, чтобы прояснить, как я сделал пейзажные изображения.

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 
}