Адаптивное изображение сетчатки

Question

Я хочу показать только одно изображение для всех дисплеев, поэтому я создал изображение шириной 2000px, которое в два раза больше ширины дисплея, и установил ширину и высоту в теге img со встроенным стилем на ширину 1000px и высоту 242px. Я добавил класс начальной загрузки под названием img-responseive к тегу 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, без использования setsrc и без использования файла 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;
}