0
我正在尋找一種方法來縮放多個圖像,但有些複雜的標記(請指出,如果您看到某些可以更改以實現此目的,同時保持相同的功能)。根據最寬的圖像縮放SVG圖像,保持比例
這個想法是,最寬的圖像將設置所有其他圖像的大小。因此,當瀏覽器窗口縮小並展開(這將調整容器的藍色邊框)時,它會將所有圖像的大小調整爲所述容器的寬度(所有圖像的高度必須始終保持不變,以便不會出現文字看起來比另一個大)。
標記的通氣管低於,這裏就是我追求HERE(這個不能擴展,因爲它應該的樣子未完成DEMO
視覺參考,但顯示瞭如何名單圖像在縮放到容器寬度時應該看起來像)。
<div class="row center-width">
<div class="small-12">
<div class="checkbox clearfix">
<input id="AlbertoAlessi" type="checkbox" value="Alberto Alessi" name="designers[]">
<label class="fieldchk" for="AlbertoAlessi"></label>
<label class="namechk" for="AlbertoAlessi"><img src="https://dl.dropboxusercontent.com/u/3618143/names/DM25_website_orange-03.svg"></label>
</div>
<div class="checkbox clearfix">
<input id="RonArad" type="checkbox" value="Ron Arad" name="designers[]">
<label class="fieldchk" for="RonArad"></label>
<label class="namechk" for="RonArad"><img src="https://dl.dropboxusercontent.com/u/3618143/names/DM25_website_orange-04.svg"></label>
</div>
<div class="checkbox clearfix">
<input id="TimBlanks" type="checkbox" value="TimBlanks" name="designers[]">
<label class="fieldchk" for="TimBlanks"></label>
<label class="namechk" for="TimBlanks"><img src="https://dl.dropboxusercontent.com/u/3618143/names/DM25_TIM.svg"></label>
</div>
<div class="checkbox clearfix">
<input id="Barnbrook" type="checkbox" value="Jonathan Barnbrook" name="designers[]">
<label class="fieldchk" for="Barnbrook"></label>
<label class="namechk" for="Barnbrook"><img src="https://dl.dropboxusercontent.com/u/3618143/names/DM25_website_orange-06.svg"></label>
</div>
</div>
</div>