Я читал этот пост, посвященный стеку, под названием «Можете ли вы сделать iFrame отзывчивым?», И один из комментариев / ответов привел меня к этому jfiddle.
Но когда я попытался реализовать HTML и CSS, чтобы удовлетворить свои потребности, у меня не было таких же результатов / успеха. Я создал свою собственную скрипку JS, чтобы показать вам, как она работает не для меня. Я уверен, что это как-то связано с типом iFrame, который я использую (например, изображения продукта могут быть слишком адаптивными или что-то в этом роде?)
Моя главная проблема заключается в том, что когда мои читатели блога посещают мой блог на своем iPhone, я не хочу, чтобы все было на ширине х (100% для всего моего контента), а затем iFrame плохо себя ведет и является единственным элементом шире (и, следовательно, придерживается мимо всего другого контента - если это имеет смысл ??)
В любом случае, кто-нибудь знает, почему это не работает? Спасибо.
вот HTML и CSS МОЕГО JSFIDDLE (если вы не хотите нажимать на ссылку):
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
frameborder="0" allowfullscreen></iframe>
</div>
</div>и вот сопровождающий CSS:
.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}
.h_iframe {
position: relative;
}
.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}
.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}