如何创建一个响应式图像,也可以在Bootstrap 3中扩展

Question

我目前正在使用twitter bootstrap 3,我面临着创建响应式图像的问题.我用过img-responsive课.但图像尺寸没有扩大.如果我使用width:100%而不是max-width:100%那么它完美地工作.问题出在哪儿？这是我的代码:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Answer 1

Bootstrap的响应式图像类设置max-width为100%.这会限制其大小,但不会强制它进行拉伸以填充大于图像本身的父元素.您必须使用该width属性强制升级.

http://getbootstrap.com/css/#images-responsive

Answer 2

当然有事!

.img-responsive 使用引导程序使图像响应的正确方法3您可以为要做出响应的图片添加一些高度规则,因为有责任,宽度沿高度变化,修复它和你在那里.

Answer 3

不确定它是否对你有帮助......但是我不得不做一个小技巧来使图像更大但保持响应

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

希望它有助于PS最大宽度可以是你喜欢的任何东西

Answer 4

如果在图像上设置固定宽度不是一个选项,这里是一个替代解决方案.

有一个父div与display:table&table-layout:fixed.然后将图像设置为显示:table-cell和max-width为100%.这样,图像将适合其父级的宽度.

例:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

小提琴:http://jsfiddle.net/5y62c4af/

Answer 5

在 CSS 样式表中尝试以下操作：

.img-responsive{
  max-width: 100%;
  height: auto;
}