css - 如何使高度适应移动设备横向方向的 100%

Question

我的网站处于这种情况:当我将方向更改为横向时，如果宽度长于高度，我的画廊的拇指就可以了。简而言之，如果拇指具有横向形状，我可以旋转屏幕并且图像非常适合它。 相反，对于纵向图片，高度长于宽度，只有我在纵向模式下正常使用手机屏幕时才适合。但是如果我旋转屏幕，高度不完全适合屏幕，我只能看到图像的一部分。相反，我希望高度为 100% 并且宽度自动适应它。 这是我要修复的页面

http://www.paolobergomi.it/new-gallery/indoor-portraits/

我所有移动设备的CSS代码如下

    @media only screen and (min-device-width: 20px)  and (max-device-width: 991px)
    .responsive1 {

       width: 100%;
        height: auto;
      border-bottom: 1px solid #fff;

    }

)

我尝试使用(方向:横向)但它不起作用。当我旋转屏幕时没有任何变化，高度仍然不适合屏幕的 100%。 非常感谢解决此问题的任何提示；) 非常感谢。 保罗

Answer 1

尝试添加 css 属性 mnax-height/width。如果可能，将图像放在一个 div 中。这似乎类似于我前段时间回答的问题。

Child with max-height: 100% overflows parent

继承属性值通过“计算样式”获取父级的高宽

---

@media only screen and (min-device-width: 20px)  and (max-device-width: 991px)
    .responsive1 {
       max-width: inherit;
       max-height: inherit;
       border-bottom: 1px solid #fff;

    }

)

我查看了您的页面，将屏幕调小并没有影响图像

查看您的源代码，我看到两条奇怪的评论。改为<!-- comments --> .

<!—Logo e pulsante per barra ridimensionata -->
<!—Elementi della barra -->

接下来我看到“Vinny”的条目。 title 属性有分隔字符串的双引号。

title="Vinny,  studio meetup, "50hz Photography" Dublin, May 2015"

更改这些错误后，我确实将图像的宽度设置为 100%，并且它适应了屏幕。不幸的是我的显示器不旋转......;-)