twitter-bootstrap 如何处理引导列内的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35204400/
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 handle an image inside bootstrap column?
提问by Alex Shmatko
I got bootstrap col-md-1that contains an image inside. Moreover, that column is wrapped by content divwith paddings.
我得到了包含图像的bootstrap col-md-1。此外，该列由带有填充的内容div包裹。
The problem I'm not okay with is that this image is pretty small. I would like it to be with the size at least as the original one has,
我不满意的问题是这张图片很小。我希望它的尺寸至少与原始尺寸一样，
yet it should be responsive.
但它应该是响应式的。
How can I do this? Thanks in advance!
我怎样才能做到这一点？提前致谢！
HTML
HTML
<div class="content">
<div class="row">
<div class="col-md-11 first-column"></div>
<div class="col-md-1 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 100px;
}
回答by David Wilkinson
One of the 'blanket' styles that BootStrap ships with is this:
BootStrap 附带的一种“毯子”样式是这样的：
img {
max-width: 100%;
}
This essentially means that images won't go wider than their parent containers / elements. So if your col-md-1has a width of 97.5px (assuming you're using a normal 1170px container?), your image won't be bigger than 97.5px on viewports > 992px.
这实质上意味着图像不会比它们的父容器/元素更宽。因此，如果您col-md-1的宽度为 97.5 像素（假设您使用的是普通的 1170 像素容器？），您的图像在视口 > 992 像素上不会大于 97.5 像素。
Try experimenting with different sized columns:
尝试尝试不同大小的列：
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
Or, for larger viewports, try appending another class to your wrapping container and overrides BootStrap's native container class:
或者，对于更大的视口，尝试将另一个类附加到您的包装容器并覆盖 BootStrap 的本机容器类：
<div class="container container-custom">
Then style is as follows:
那么样式如下：
@media (min-width: 1420px) {
.container.container-custom {
width: 1390px
}
}
Doing this will ensure your column widths remain proportionate to your container size (they are percentage based after all) and most importantly, you're not overwriting BootStrap!
这样做将确保您的列宽与您的容器大小成比例（毕竟它们是基于百分比的），最重要的是，您不会覆盖 BootStrap！
You'll also notice I've wrapped the above class in a media query. This is so viewports > 1420px have the 1390px container with spacing either side (due to container's margin-left: autoand margin-right: autowhich center it in the viewport).
您还会注意到我已将上述类包装在媒体查询中。这就是视口 > 1420px 具有 1390px 容器，两侧间距（由于容器的margin-left: auto和margin-right: auto它在视口中的中心）。
