Iframe автоматически изменяет размер по высоте ⇐ Jquery

[Anonymous]

У меня есть адаптивная галерея, но у меня возникли некоторые проблемы с iframe, куда вставляется галерея, высота не применяется автоматически и на странице отображается вертикальная прокрутка, как я могу изменить размер iframe по стилю высоты только в теге iframe или src html-страницы?

Мой код:
gallery.html:

Код: Выделить всё

[img]http://i.imgur.com/jeUxtJG.jpg[/img]

Title
description of whatever


[img]http://i.imgur.com/jeUxtJG.jpg[/img]

Title
description of whatever


[img]http://i.imgur.com/jeUxtJG.jpg[/img]

Title
description of whatever


[img]http://i.imgur.com/jeUxtJG.jpg[/img]

Title
description of whatever

CSS:

Код: Выделить всё

* {
padding: 0;
margin: 0;
}

/*GALLERY STYLES*/
.galleryItem {
color: #797478;
font: 10px/1.5 Verdana, Helvetica, sans-serif;
width: 60%;
margin:  2% 2% 50px 2%;
float: left;
-webkit-transition: color 0.5s ease;
}

.galleryItem h3 {
text-transform: uppercase;
line-height: 2;
}

.galleryItem:hover {
color: #000;
}

.galleryItem img.js-tagged-image {
max-width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
.galleryItem {width: 60%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
.galleryItem {width: 60%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.galleryItem {width: 60%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.galleryItem {width: 96%;}
.galleryItem img {width: 96%;}
.galleryItem h3 {font-size: 18px;}
.galleryItem p, .header p {font-size: 18px;}
}

Iframe:

Код: Выделить всё

url/gallery.html

Результат изображения iframe:



Подробнее здесь: https://stackoverflow.com/questions/402 ... -in-height