反应性视网膜图像

Question

我只想为所有显示器提供一个图像，所以我创建了一个2000 in宽的图像，它是显示宽度的两倍，并将img标签中的宽度和高度设置为1000 in宽和242 in高。我将名为“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，不使用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;
}