Отзывчивая изображение сетчатки

Question

Я хочу показывать только одно изображение для всех дисплеев, поэтому я создал изображение шириной 2000 пикселей, которое удваивает ширину экрана и задает ширину и высоту в теге img с встроенным стилем до 1000 пикселей по ширине и 242px высокий. Я добавил класс начальной загрузки под названием «IMG-отзывчивый» в IMG тег, который включает следующий код CSS:

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

Однако теперь, когда ширина экрана уменьшает ширину изображения шкалы, но высота фиксирована. Как сделать ширину и ширину экрана с шириной экрана и использовать только изображение с двойной шириной без использования retina.js без использования setrc и без использования файла svg?

Answer 1

Попробуйте добавить важный тег в высоту: авто. Я думаю, что у вас есть еще один css, влияющий на ваш стиль.

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