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 {
    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

    # 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](https://github.com/h5bp/html5-boilerplate/blob/master/index.html), 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() {
    callback.call( $this, $images ),
    $(“div.masonry-box img”).css({‘visibility’: ‘visible’, ‘width’: ’100%’});
    }

    Thanks

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".