Remove Img Size with jQuery and media query

Question

I wish that when the resolution is less than 980px, the code below should be executed (remove width and height from a img). How will be the code? Thank you

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){

        $('img').each(function(){ 
            $(this).removeAttr('width')
            $(this).removeAttr('height');
        });
    });
</script>

I don't see any code here that indicates a `@media` query. Also, `@media` queries will only change CSS ... if you have hardcoded height and width attributes on the img tags, I believe those will take precedence over CSS-implemented height and width, or at the very least, will cause render issues as one size will appear during load, and may change suddenly when the CSS is finished styling the markup. — Jason M. Batchelor, Feb 22 '13 at 18:43

score 0 · Answer 1 · answered Feb 22 '13 at 18:38

0

You can use the resize function.

$(window).resize(function(){
    if( $(this).width() < 980 )
    {
        $('img').each(function(){ 
            $(this).removeAttr('width').removeAttr('height');
        });
    }
});

And putting them back when larger?

$(window).resize(function(){
    if( $(this).width() < 980 )
    {
        $('img').each(function(){ 
            $(this).data("widthheight", { w : $(this).attr("width"), h : $(this).attr("height") });
            $(this).removeAttr('width').removeAttr('height');
        });
    }
    else
    {
         $('img').each(function(){ 
            if( $(this).data("widthheight") )
            {
                $(this).attr('width', $(this).data("widthheight").w)
                       .attr('height', $(this).data("widthheight").h);
             }
        });
    }
});

answered Feb 22 '13 at 18:38

Niels

48,601
4
62
81

I wouldn't recommend that approach, though. window resize gets triggered on a lot of different actions ... and on mobile, can (and often is) triggered on device orientation change. If you put a lot of manipulation within, this will quickly lock up the UI. – Jason M. Batchelor Feb 22 '13 at 18:39
True it happens a lot if you resize, but, you need to bind on a resize otherwise you can't detect if it gets resized? What do you suggest? – Niels Feb 22 '13 at 18:43
I'd use a responsive approach with media queries, which is what the OP is implying in the title of his question, but has provided not enough code to illustrate how his markup/css is currently structured. As his question stands, we don't really know if we're dealing with `` or `` (or, if the latter, hopefully something class-driven), so your solution might not even fit the actual problem, because we don't have a complete enough question to work from. – Jason M. Batchelor Feb 22 '13 at 18:48
Especially the second half of your question... that's going to cause an entire DOM reflow every time the resize event is issued, a very expensive proposition, especially if the images are large. If the OP has no control over how the markup comes out, then it might be his only option, but I'd rather know more before suggesting taking that route, that's all. – Jason M. Batchelor Feb 22 '13 at 18:51
Totally true, I hope it is CSS based. Because than we can actually solve this with CSS instead of JS which is of course a lot better. – Niels Feb 22 '13 at 18:51
I would like to remove the code because I am using wordpress-resolution thumbnails, but when mobile, the image will fill the screen size. The wordpress code of thumb is `add_theme_support ('post-thumbnails'); add_image_size ('portfolio1', 226, 155, true)`, and it generates the html: ``. I already have a container with width 100%, so i just need to remove it when you are in that resolution. – Lucas Fernandes Feb 22 '13 at 19:15

score 0 · Answer 2 · answered Feb 22 '13 at 18:38

0

you can make that more concise:

jQuery(document).ready(function($){
    $('img').removeProp('width').removeProp('height');
});

answered Feb 22 '13 at 18:38

Derek

4,575
3
22
36

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

I think I found a relevant stack overflow thread here . I assume you will need to write a short javascript functon once you detect the screen resolution.

edited May 23 '17 at 12:19

Community

1
1

answered Feb 22 '13 at 18:41

Pestilence

21
3

Remove Img Size with jQuery and media query

3 Answers3