Q: How to prevent an image size from changing when I resize the browser How can i prevent an image from resizing when i try to change the browser's size? Here's an example of what I am talking about. Try to resize your browser and you'll see the image not changing. It seems simple but I've tried everything I know without success.
Thanks

A: Try This
CSS
.hero img
{
width:500px; !important /* desired pixel value */
}

hope this helps..

A: There are many ways you can ensure that the image size doesn't change. 
<!DOCTYPE html>
<html>
    <style>
    img {
        width = 100px;//or any size you want but not in '%'
        height = auto;//or in px or in em
    }
    </style>
    <body>
        <img src="imgsrc" alt='img'>
    </body>
</html>

the width can be any size you want but make sure the length unit that use should be an absolute unit. In css following are the absolute units:


*

*cm (centimeters)

*mm (millimeters)

*in (inches)

*px (pixels)

*pt (points, 1 point is 72nd part of an inch)

*pc (picas, 1picas is 12th part of a point)


You can, if you want use 'em' as essential 1em is means the current font size and you can then sent the current font size in px which is absolute and isn't affected by browser re-size.
Same goes with height but you should set the height to auto as in that case you are preserving the aspect ratio of the original image.
For more information on CSS units of length refer this w3-school reference.
