[英]HTML Resize iframe to responsive iframe
Hello I have an iframe in my website, it's 728px width. 您好,我的网站上有一个iframe,它的宽度为728px。
Picture: http://s8.postimg.org/5r5d4wm7n/iframe.png 图片: http : //s8.postimg.org/5r5d4wm7n/iframe.png
It's the blue background iframe. 这是蓝色背景iframe。
I have a problem in mobile it's looks like this: http://s10.postimg.org/drrxc4ak9/iframe2.png 我在移动设备中遇到问题,看起来像这样: http : //s10.postimg.org/drrxc4ak9/iframe2.png
How should I fix it to be 100% width but still all of the 728px will be on the screen? 我应该如何将其固定为100%宽度,但所有728px仍将显示在屏幕上?
Thanks! 谢谢!
You could try this: 您可以尝试以下方法:
iframe {
width: 728px;
}
@media screen and (min-width: 100px) and (max-width: 540px) {
iframe {
width: 100%;
}
Then, when the screen width size is above 540px, your regular code will work. 然后,当屏幕宽度尺寸大于540像素时,您的常规代码即可使用。 In this case, 728px. 在这种情况下,为728px。 When the screen width size is from 100px-540px, the iframe would be 100%. 当屏幕宽度尺寸为100px-540px时,iframe为100%。
Currently writing in on my ipad, so its hard to test the code. 目前在我的ipad上书写,因此很难测试代码。 So I am sorry if there are some bugs. 因此,如果有一些错误,对不起。
Hope this helps 希望这可以帮助
Try using a combination of width and max-width 尝试结合使用width和max-width
iframe {
width: 100%;
max-width: 728px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.