показать баннер в полном размере

Question

Почему этот баннер (который находится внутри iFrame) не увеличивается до полного размера div?

Мои JSFIDDLE можно найти здесь, и некоторые из моих CSS ниже:

width: 300px; 
height: 222px; 
background-size: cover; 

Answer 1

Вы могли бы сделать это следующим образом:

<div class="indexRightBanners"> 
    <iframe class="banner300x222Iframe" frameborder="0" scrolling="no"></iframe> 
</div> 

С css:

.indexRightBanners { 
    width: 300px; 
    height: 222px; 
    margin-bottom: 20px; 
    background: black; 
} 

.banner300x222Iframe { 
    background-image: url(http://img3.wikia.nocookie.net/__cb20141123145956/powerpuff/images/4/4e/IaCN7A0NfI4ig3cnoNGD2lADi06s4b2fB8S9nNEVKM4hpJv5qzy3Z3euZWr2Sw5Rj5QwKVMvdj-300x222.jpg); 
    background-size:cover; 
    width: 300px; 
    height: 222px; 
} 

->http://jsfiddle.net/vhy82x6w/3/

Проблема с вашим кодом в том, что ваше изображение имеет ширину всего 200 пикселей, как указал Амит.

Answer 2

CSS имеет возможность попытаться растянуть вещи, используя проценты. Попробуйте использовать следующее:

width: 100%; 
height: 100%; 
background-size: 100%; 

Более подробная информация о процентных CSS свойств можно найти здесь (http://learnlayout.com/percent.html), а также здесь (http://www.w3schools.com/cssref/pr_dim_width.asp)

Answer 3

Вы не можете изменить содержимое в iFrame. Включая стиль. Если ваш контент - всего лишь изображение, вы можете просто использовать тег img с атрибутом src, установленным на ваш url.

Если вам нужно содержимое html, вы можете попробовать его загрузить в div с помощью ajax и jquery. Если URL-адрес находится в том же домене, что и ваша страница, вы можете использовать Jquery's $.get(), если он находится во внешнем домене, вы можете использовать This Cross Origin Solution. После загрузки содержимого у вас будет полный доступ к нему в DOM для стилизации.