Search code examples
cssretina

Responsive retina image

I only want to serve up one image for all displays, so I have created an image 2000px wide which is double the display width, and set the width and height in the img tag with inline styling to 1000px wide and 242px high. I've added the bootstrap class called 'img-responsive' to the img tag which includes the following css code:

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

However now when the screen width reduces the image width scales but the height is fixed. How can I make both width and height scale with screen width and only use one double width image, without using retina.js, without using setsrc, and without using an svg file?

Solution

  • Try adding important tag to height: auto. I think you have some other css affecting your style.

    .img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto !important;
}