Get a free trial // Grow your CSS skills // Land your dream job

Setting image width 100% not working.

  • # February 25, 2013 at 10:28 pm

    $(‘.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 {

    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.


    # February 25, 2013 at 10:35 pm

    I noticed that you have `.div` in the jQuery version but just `div` in the CSS version. Is this intentional? Did you make a class name called `div` (I don’t even think that’s possible). I think that’s your problem…

    # February 25, 2013 at 11:37 pm

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

    # February 25, 2013 at 11:50 pm

    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](, see the order resource are loaded. It’s a good place to start.

    # February 26, 2013 at 2:08 pm

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

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


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed