如何使用 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>

这是htmlfiddle

Answer 1

为您的图像提供 'img-responsive' class 并将其包装在默认的 bootstrap 树中（容器 - 行 - 列）

Answer 2

将 Bootstrap 的内置 .img-responsive class 添加到任何图像标签即可完成这项工作。

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

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

如何使用 bootstrap 制作响应式图像和块？

how to do responsive images and blocks with bootstrap?

html

css

responsive-design

twitter-bootstrap