Html 响应式设计中的固定尺寸iframe

我有几张我的照片。问题是，它们的大小是固定的，并且不能很好地使用twitter引导。有没有办法让他们调整尺寸？或者至少当屏幕大小改变时，我的其他div不会在它们下面/重叠，而是在它们周围移动

index.html

---

jQuery有一个很好的方法叫做resize。你可以这样做。（未测试代码）

---

理论上，这应该有助于您的iframe放置漂亮的

好的，在查找小部件后，我可以调整它的大小，但是小部件的内部没有响应，所以它没有用

唯一其他可能的方法是您正在使用的方法（mediaqueries），但由于以下两个原因它不起作用：

<!-- SnapWidget ipad profile-->
            <div class"instagram_ipad_p">

div

未关闭（

），类缺少一个=

---

在这些修改之后，您的mediaqueries将工作

你试过在

style

属性中使用%值吗？@Karl AndréGagnon我试过。iframe保持其输出尺寸。除非我需要把它和其他东西的比例定为%？我不知道该怎么做，或者你是否应该这么做。试试这个CSS看看它是否工作：

iframe{width:100%！important；}

！“重要”不是一个好方法，但我喜欢在测试CSS覆盖时使用它。@Karl AndréGagnon，它似乎在宽度方面工作，但在使用

height:auto与
宽度一起使用：100%！重要的iFrame缩小到大约120px。然后，你绝对需要jquery来调整它的大小，如果你想让我做代码，请告诉我。当涉及到网页设计时，我还是相当新手。我知道最小jQuery，但我将尝试一下，然后看看。目前，我正在尝试设置多个iFrame大小，并在媒体查询中调用它们。
.stayright {
    float: right;
    height: 100%;
    padding-bottom: 25px;
}

.stayleft {
    float: left;
    height: 100%;
}

.small1 {
    padding-bottom: 15px;
}

.small2 {
    padding: 15px 0 25px 0; 
}

.big2 {
    padding: 25px 0px;
}

.r2 .small1 {
    padding-bottom: 15px;
}

.big2 {
    margin-top: -25px;  
}

@media (min-width: 1024px) {
.instagram_iphone { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 1023px) and (min-width: 769px) {
.instagram_iphone { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_desktop { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 768px) and (min-width: 481px) {
.instagram_desktop { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 480px) and (min-width: 321px) {
.instagram_desktop { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone { display: none !important; }
}

@media (max-width: 320px) {
.instagram_iphone_ls { display: none !important; }
.instagram_desktop { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_ipad_p { display: none !important; }
}

//initially set the iframe's width to the window size
mtarget = getElementById... //get the iframe
mtarget.width = $(window).width;

$(window).resize(function() {
//and again...set the width of the iframe to $(window).width()...?
});

<!-- SnapWidget ipad profile-->
            <div class"instagram_ipad_p">

<!-- SnapWidget iphone-->
            <div class"instagram_iphone"