如何使图像响应使用引导而不占据整个分区的宽度？ [英] How to make an image responsive using bootstrap without having it take up the entire width of the division?

问题描述

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

Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.

如何在保持原始宽度的同时使图片具有响应性？

How can I make the image responsive while still keeping its original width?

推荐答案

您可以将图像放在包装器中，并为包装器提供您想要的图像的宽度。
HTML

You can put the image in a wrapper and give the wrapper the width you want the image to have. HTML

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

CSS

.imgwrapper {
   width: 80%;
}

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

The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.

如果这不能回答你的问题，你能用更好地解释你的意思，保持原始宽度，但使它响应？由于响应式会调整图片大小，因此不会有原始宽度。

If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.

这篇关于如何使图像响应使用引导而不占据整个分区的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！