如何在 twitter-bootstrap 中停止图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12719649/
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 stop image responsive in twitter-bootstrap?
提问by Logan
I'm using twitter bootstrap to making responsive layout.It works like awesome.
我正在使用 twitter bootstrap 来制作响应式布局。它的工作原理很棒。
It makes images too responsive. I need some images only need to be fixed width and height.
它使图像过于敏感。我需要一些图像只需要固定宽度和高度。
<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>
How can i make it?
我怎样才能做到？
采纳答案by Logan
Finally worked.
终于工作了。
.fixed_width {
height: 40px;
width: 50px;
}
<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>
回答by hajpoj
Create a new class and set the min height and min-width equal to the width and height of the image that you don't want to shrink, and add that class to those images.
创建一个新类并将最小高度和最小宽度设置为您不想缩小的图像的宽度和高度，然后将该类添加到这些图像中。
eg.
例如。
/* css */
img.no-resize {
min-height: 40px;
min-width: 50px;
}
/* html */
<div class="span1">
<img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40">
</div>
回答by Milche Patern
Check your code make sure that by setting image's width and height attributes like you didit's not working and there is an interference in the styling to fix:
检查您的代码，确保通过设置图像的宽度和高度属性like you did它不起作用并且样式中存在干扰以修复：
<div class="span1">
<img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" />
</div>
Your image is not supposed to resize with Bootstrap if you correctly fill in width and height attributes. The inlined attributes have precedence over css.
如果您正确填写宽度和高度属性，则不应使用 Bootstrap 调整图像大小。内联属性优先于 css。
Otherwise, you have to OVERWRITE the img styling from bootstrap.css (line ~68 version 2.0.)
否则，您必须从 bootstrap.css 覆盖 img 样式（行 ~68 版本 2.0。）
img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%;
/* Part 1: Set a maxium relative to the parent */
width: auto;
/* IE7-8 need help adjusting responsive images */
height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Create a css selector with your specifications :
使用您的规格创建一个 css 选择器：
/* css */
.max-resize-50x40 {
max-height: 40px;
max-width: 50px;
}
.resize-50x40 {
height: 40px;
width: 50px;
}
回答by atype
Even simpler, you should be able to just add a generic class to the image so you can use it on multiple image sizes...
更简单的是，您应该能够向图像添加一个通用类，以便您可以在多种图像尺寸上使用它......
/* html */
<img src="image.jpg" alt="An image" class="fixed-size" />
/* css * /
img.fixed-size { height: auto; width: auto; }
I haven't tried it in IE but it works on Safari, FF and Chrome.
我没有在 IE 中尝试过，但它适用于 Safari、FF 和 Chrome。
回答by trev
To add to the answer posted by @atype I would put as follows:
要添加到@atype 发布的答案中，我将输入如下：
/* html */
<img src="image.jpg" alt="An image" class="fixed-size" />
/* css * /
img.fixed-size { height: auto !important; width: auto !important; }
