Setting image width 100% not working.

[revolutiong]

$(‘.div.masonary-box img’).css(‘width’, ‘100%’);

Doesn’t seem to work for me in javascript, yet it works when its in css.

div.masonary-box img {
width:100%;
}

Using Masonry, before the script creates the column its shows a blown up image for millisecond. So my plan is the just load my css after the script to resolve this.

Thanks

[revolutiong]

That worked, didn’t solve my issue with my images blowing up however. Thanks for your help.

[Alen]

Did you try visually hiding the image with CSS. Then, when DOM and all the resources load show the image with JavaScript.

Look at the [HTML5 Boilerplate index page](https://github.com/h5bp/html5-boilerplate/blob/master/index.html), see the order resource are loaded. It’s a good place to start.

[revolutiong]

Great idea. Within the Masonry js there is ImagesLoaded Function. Added my css as so…

function triggerCallback() {
callback.call( $this, $images ),
$(“div.masonry-box img”).css({‘visibility’: ‘visible’, ‘width’: ‘100%’});
}

Thanks

[Author]

Posts