响应式视网膜图像

Question

我只想为所有显示提供一个图像，所以我创建了一个 2000 像素宽的图像，它是显示宽度的两倍，并在带有内联样式的 img 标签中将宽度和高度设置为 1000 像素宽和 242 像素高的。我已将名为 'img-responsive' 的 bootstrap class 添加到包含以下 css 代码的 img 标签：

.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;
}

响应式视网膜图像

Responsive retina image

css

retina