CODEWITHSUNDEEP
jqueryhtml
Lucas Fernandes
Lucas Fernandes

Reputation: 1416

Remove image size by screen size

I would like to know if there is some way that I can remove the image width and height when my screen resolution is lower than 980px? Through a jquery or something?

Image like this:

<img width="477" height="299" src="/uploads/2012/01/415.jpg" class="attachment-portfolio2 wp-post-image"/>

Thank you

Upvotes: 1

Views: 756

Answers (2)

BenM
BenM

Reputation: 53198

You can use the jQuery removeAttr() method:

var images;

$(function() {  
    images = $('img.wp-post-image');
    removeSize();
});

$(window).resize(removeResize);

function removeSize()
{
    if($(window).width() < 980 && images.length > 0)
    {
        images.removeAttr('width').removeAttr('height');
    }
}

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

You can use the following CSS:

/* for all screens in general */
.wp-post-image {
   width: 477px;
   height: 299px;
}

/* specifically for screens smaller than (or equal to) 980px */    
/* make sure this comes *after* the general rule */
@media (max-width: 980px) {
  .wp-post-image {
    width: auto;
    height: auto;
  } 
}

Upvotes: 2

Related Questions