基于CSS内容的布局

Question

我想用CSS来美化一个弹出窗口（magnific popup）。它的内容是通过AJAX生成的，包含一张图片和一些文本。当图片处于横向方向时，它看起来非常漂亮，但当图片处于纵向方向时，它看起来完全不适合，因为图片被缩放到了width: 100%。

弹出窗口类有两个，例如popupcontainer0和popupcontainer1，如何使其适配？我搜索了很多并尝试了很多方法，但它看起来还不够理想。

我创建了一张图片，展示了我想要达到的比例。我还在图片中放入了文档树的相关部分，以清晰地说明我如何处理横向图片。

- Leonhard

---

欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、具体问题或错误以及重现它所需的最短代码。请参阅如何创建一个最小、完整和可验证的示例。 - Paulie_D

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
}

- Nikhil Aggarwal

---

谢谢你的回答，我已经明白了。我目前的问题是，我无法很好地为弹出窗口设置样式。 - Leonhard

好的。那么你只需要对它进行一些调试，就可以解决你的问题了。 :) - Nikhil Aggarwal