如何使用bootstrap使图像响应而不占用整个分区的宽度？

Question

使用twitter bootstrap的任何人都知道可以使用html img标记中的img-responsive类来响应图像。但是，这些图像占据了分区宽度的100％。

如何在保持原始宽度的同时使图像响应？

Answer 1

您可以将图像放在包装中，并为包装器提供您希望图像具有的宽度。 的 HTML

<div class="imgwrapper">
   <img src="img.jpg" class="img-responsive">
</div>

<强> CSS

.imgwrapper {
   width: 80%;
}

理论上，上面应该使父元素宽度的imgwrapper 80％，图像上的img-responsive - 类将填满整个包装。

如果这不能回答你的问题，你能用keep original width, but make it responsive更好地解释一下你的意思吗？由于使其响应会调整图像大小，这意味着它不会具有原始宽度。

Answer 2

您应该在图像周围有一个包装器，用于定义可用于放置该图像的父级的实际大小。它将与父div相关。然后对图像应用.img-responsive。这将导致图像与包装器具有相同的宽度。

<强> HTML

<div class="wrapper">
   <img src="your-image.jpg" class="img-responsive" />
</div>

<强> CSS

.wrapper {
   width: 50%;
}

如果你想保持原始尺寸（它会调整为小尺寸但不会更高），你还应该添加一个max-width，它必须与图像的原始尺寸相对应。这将覆盖原始值100％

.wrapper img {
    max-width: 280px;
}

Answer 3

Transfer-Encoding类将.img-responsive和max-width: 100%;应用于图像，因此如果要明确保留其原始宽度，则必须使用img标记的宽度属性设置图像宽度。