反应性视网膜图像

Question

我只想为所有显示器提供一个图像，所以我创建了一个2000px宽的图像，它是显示宽度的两倍，并将img标签中的宽度和高度设置为内嵌样式为1000px宽和242px高。我已经将名为'img-responsive'的引导类添加到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;
}