Wie bestimmt img-responsive die passende Größe der Bilder? - Bild, Twitter-Bootstrap, Twitter-Bootstrap-3, Reaktionsfähigkeit

Ich habe also zwei Bilder, die an zwei Orten verwendet werden.

Standort 1:

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

Ort 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="/images//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="/images//img/printer_white.png"/>
</a>
</div>
</div>

Die Bilder selbst sind groß und 512x512 undBootstrap hat beschlossen, die Größe an Position 1 auf 79 x 79 zu verkleinern. Seltsamerweise werden die Bilder durch Hinzufügen eines Eingabefelds und einer Schaltfläche an Position 2 auf 59 x 59 verkleinert.

Diese ganze Sache mit der Skalierung scheint mir willkürlich und ich würde es wirklich schätzen, wenn mir jemand die Logik dahinter erklären könnte.

Antworten:

Die Bildbreite ist abhängig von der Spaltengröße. Der Grund für die Diskrepanz in der Bildgröße zwischen den beiden Standorten ist, dass sich Standort 2 innerhalb von a befand <div class="col-md-10">.

Dadurch wurde das Bild verkleinert, da die Breite des zweiten Standorts 1/12 von 10/12 beträgt, gegenüber nur 1/12 an Position 1.

Die Bildbreite hängt von der Größe der Boostrap-Spalte ab. Wenn Ihr Bild reagiert, nimmt es die gesamte Spaltenbreite ein