Question

我正试图找到一种让我的图像响应的方法。

我正在使用Bootstrap，他们是一个班级名称 “img-responsive”

但是，它没有正确调整图像大小。

以下是我所做的调用它并且它没有正确执行：

HTML：

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">

以下是我在bootstrap.css中使用的容器。

CSS：

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

我不确定我做错了什么

更新：

我正在使用coldfusion，我正在尝试使用img-responsive。但是，它不起作用，我不知道为什么。

我使用了以下css来使横幅图像响应但看起来不起作用

/*responsive carousel images*/
figure {
  max-width: 460px;
  max-height: 345px;
}
figure img {
  max-height: 345px;
}
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

以及以下的coldfusion代码：

<figure>
    <img class="img-responsive" src="#local.item.getImageURL(argumentCollection=local.imageArgs)#" alt="#HTMLEditFormat(local.item.getTitle())#">
</figure>

Answer 1

问题是您在img标记中使用的内联样式会影响您的img-responsive类。

固定width和height的问题是它使响应式设计变得困难。

我建议您将img包裹在figure中，然后应用max-width和max-height。

CODE SNIPPET

figure {
  max-width: 460px;
  max-height: 345px;
}
figure img {
  max-height: 345px;
}
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

<figure>
  <img class="img-responsive" src="http://fillmurray.com/1000/1000">
</figure>

Answer 2

Bootstap .img-responsive声明max-width：.css中的100％但你的内联宽度/高度会覆盖它

因此，您应该尽量不使用内联宽度=＆＃34;＆＃34;和身高=＆＃34;＆＃34;在响应式布局中

使图像响应

2 个答案: