twitter-bootstrap - 如何在 twitter-bootstrap 中停止图像响应？

Question

我正在使用 twitter bootstrap 来制作响应式布局。它的工作原理非常棒。

它使图像过于敏感。我需要一些图像只需要固定宽度和高度。

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>

我怎样才能做到？

Answer 1

创建一个新类并将最小高度和最小宽度设置为您不想缩小的图像的宽度和高度，然后将该类添加到这些图像中。

例如。

/* 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>

Answer 2

检查您的代码，确保通过设置图像的宽度和高度属性like you did它不起作用，并且要修复的样式存在干扰：

<div class="span1">
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" />
</div>

如果您正确填写宽度和高度属性，则不应使用 Bootstrap 调整图像大小。内联属性优先于 css。

否则，您必须覆盖 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\9;
  /* 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;
}

使用您的规范创建一个 css 选择器：

/* css */
.max-resize-50x40 {
    max-height: 40px;
    max-width: 50px;
}
.resize-50x40 {
    height: 40px;
    width: 50px;
}

Answer 3

终于奏效了。

.fixed_width {
  height: 40px;
  width: 50px;
}

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>

Answer 4

更简单的是，您应该能够向图像添加一个通用类，以便您可以在多种图像尺寸上使用它......

/* html */
<img src="image.jpg" alt="An image" class="fixed-size" />

/* css * /
img.fixed-size { height: auto; width: auto; }

我没有在 IE 中尝试过，但它适用于 Safari、FF 和 Chrome。