如何使用bootstrap执行响应式图像和块？

Question

如何在bootstrap中执行响应式产品图片？当我按照此处调整浏览器大小时，我需要缩小所有列和图片：link

<div id="product-list">
    <div class="container">
        <div class="row">
            <div class="col-lg-15 col-md-3 col-sm-4 col-xs-12 item">
                <div class="product">
                    <div class="product-image">
                        <img src="http://placehold.it/220x322" width="220" height="322" class="img-responsive" alt="Simple product">
                    </div>
                    <div class="product-info">
                        <div class="product-name">Rick Owens</div>
                        <div class="product-model">Glass ice nappa leather bomber</div>
                        <div class="product-price">€ 1161.00</div>
                    </div>
                </div>
            </div>
            <!-- more products -->
        </div>
    </div>
</div>

这里是html fiddle

Answer 1

为您的图片提供“即时响应”功能。 class并将其包装在默认的bootstrap树（container-row-col）

中

Answer 2

在任何图像标记中添加内置.img响应类的Bootstrap将完成这项工作。

.img-responsive类将以下CSS属性应用于图像：

max-width: 100%;
height: auto;
display: block;