将iframe内容包含在移动设备上的iframe大小

Question

我在手机游戏中遇到iframe问题。我有以下非常简单的代码样式我的iframe：

#iframe {
    width: 400px;
    height: 250px;
    border: none;
    background: #eee;
    z-index: 1;
}

https://jsfiddle.net/canyondellomo/1be4zf86/2/。

在桌面上，狗的图像包含在iframe的维度中。但是，当页面加载到移动设备上时，iframe内容完全忽略了iframe的大小，并扩展为其完整大小。

你能帮我解决这个问题吗？

非常感谢

Answer 1

听起来像缩小到移动时图像比iframe更大。

尝试在图像的类中设置此样式：

max-width:100%;

（或任何你需要的宽度）

这可能会使它更好地扩展。如果这不起作用，请使用百分比设置大小。百分比取决于容器中的空间大小，而不是图像本身的大小