Responsive HTML/Images

[Nick2561]

Im sure you're all aware of the new G update regarding mobile friendly sites and i want to edit my site to suit.

The site is HTML and its fairly straight forward to make it responsive, as well as the odd image but i have alot of images throughout the site.

Is there a quick and easy way of telling all of my images to become responsive, as oppose to editing the code to every image on the page?

Any help is greatly appreciated!

 

[AssetDomains]

Bootrap might do it I think a lot depends on how the html is laid I think if images sizes are coded into the actual html you may have to change it there.

Try something like this in your css see if it has any affect

img {
  max-width: 100%; 
  display:block; 
  height: auto;
}

 

[Nick2561]

That code does work but it doesn't effect all of the images, so i think where i have resized images to suit, they are not affected and thus will need to be edited manually :/

 

[AssetDomains]

That code does work but it doesn't effect all of the images, so i think where i have resized images to suit, they are not affected and thus will need to be edited manually :/

I thought that might be the case couple of things

You could try !important; after each piece of the above
also is there any other css overriding this global img

For example
.content img {
}
#content img {
}

 

[AssetDomains]

The firebug extension on Firefox is handy to see what is styling a particular section of your webpage

 

[tifosi]

There's not really a one size fits all for this. It's not the image that's responsive but the container that surrounds it. The image resizes to fit the container. Modern browsers ate much better at it than they used to be.

 

[Nick2561]

Ok thanks for your suggestions, i shall work on it tonight!