Html 如何使用引导程序使图像响应而不占用整个分区的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34289815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an image responsive using bootstrap without having it take up the entire width of the division?
提问by darkhorse
Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsiveclass in the html img tag. However, these images take up 100% of the width of the division.
任何使用过 twitter bootstrap 的人都知道使用img-responsivehtml img 标签中的类可以使图像具有响应性。但是，这些图像占据了分区宽度的 100%。
How can I make the image responsive while still keeping its original width?
如何在保持其原始宽度的同时使图像具有响应性？
回答by Rvervuurt
You can put the image in a wrapper and give the wrapper the width you want the image to have. HTML
您可以将图像放在包装器中，并为包装器提供您希望图像具有的宽度。 HTML
<div class="imgwrapper">
<img src="img.jpg" class="img-responsive">
</div>
CSS
CSS
.imgwrapper {
width: 80%;
}
The above should in theory make the imgwrapper80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.
以上理论上应该imgwrapper是父元素宽度的80%，img-responsive图像上的 -class 将填满整个包装器。
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.
如果这不能回答你的问题，你能解释一下你的意思keep original width, but make it responsive吗？由于使其具有响应性将调整图像大小，这意味着它不会具有原始宽度。
回答by Henrique M.
You should have a wrapper around the image defining the actual size of the parent that could be used to place that image. It will be related to the parent div. Then apply .img-responsive to the image. This will cause the image to have the same width as the wrapper.
您应该在图像周围有一个包装器，用于定义可用于放置该图像的父级的实际大小。它将与父 div 相关。然后将 .img-responsive 应用于图像。这将导致图像与包装器具有相同的宽度。
HTML
HTML
<div class="wrapper">
<img src="your-image.jpg" class="img-responsive" />
</div>
CSS
CSS
.wrapper {
width: 50%;
}
If you want to keep the original size (it will be resized to have small size but never higher), you should also add a max-widthwhich will have to correspond to the image's original size. This will overwrite the original value of 100%
如果您想保持原始尺寸（它将被调整为小尺寸但永远不会更大），您还应该添加一个max-width必须与图像的原始尺寸相对应的。这将覆盖 100% 的原始值
.wrapper img {
max-width: 280px;
}
回答by Meenakshi
The .img-responsiveclass applies max-width: 100%;and height: auto;to the image, so if you want to keep its original width explicitly you have to set width of image using width attribute of img tag.
本.img-responsive类应用 max-width: 100%;和height: auto;的形象，所以如果你想使用img标签的宽度属性，以保持其原始宽度明确你要的图像的设置宽度。
