Question

所以我在两个地方使用了两张图片。

位置1：

<div class="row">
    <div class="col-md-1 col-md-offset-9">
        <a>
            <img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
        </a>
    </div>
    <div class="col-md-1">
        <a>
            <img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
        </a>
    </div>
</div>

位置2

<div class="row">
    <div class="col-md-7">
        <form autocomplete="off">
            <div class="form-group">
                <input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
            </div>
        </form>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
    </div>
    <div class="col-md-1 center-block" style="margin-top:-9px;">
        <a>
            <img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
        </a>
    </div>
    <div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
        <a>
            <img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
        </a>
    </div>
</div>

图像本身很大，512x512和bootstrap决定在1到79x79的位置缩小它。奇怪的是，通过在位置2中添加输入字段和按钮，图像缩小到59x59。

这整个缩放的东西对我来说似乎是随意的，如果有人能够向我解释它背后的逻辑，我真的很感激。

Answer 1

图像宽度取决于列大小。两个位置之间图像大小不一致的原因是因为位置2位于<div class="col-md-10">内。

这样做的原因是它使图像变小，因为第二个位置的宽度是10/12的1/12而不是位置1的1/12。

Answer 2

图像宽度取决于boostrap列大小，如果图像响应则会占据所有列宽

img-responsive如何确定适当的图像大小？

2 个答案: