Responsive images that do not scale up beyond their intrinsic size

Usually all you need to make an image resize based on size of screen is to add one simple CSS rule:

img {
  width: 100%;
}

However if the screen resolution is higher than width of your image, this would result in a blurred image as there is simply not enough data in image to render it at higher resolutions. In such cases it might be more desirable to keep the image responsive, but not allow it to get larger than it's actual size. This can be achieved by the following CSS rule:

img {
  width: auto;
  max-width: 100%;
}