Question

试图弄清楚为什么这个框架http://www.kicks.se/#take-your-pick

无法在横向模式下在Ipad上渲染

我能看到的CSS是

}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

关于如何扩展以展示整个框架的任何想法？我疯了看着它！

Answer 1

嗯，这取决于您是否根据父容器设置宽度/高度。 OP代码中存在匹配父设备的高度和宽度的想法。但是这个问题也可能取决于浏览器和/或填充问题。此示例代表此技术here。

HTML：

<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>

CSS：

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

无法在横向模式下渲染Iframe

1 个答案: