2014-02-06 242 views
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> 

回答

0

不知道我明白你要在這裏完成什麼。如果要在保持高度的同時擴大寬度,這將導致延伸字符。或者,如果你想增加高度和寬度來填充空間,但這將不必要的重點放在較短的名字上。 SVG可以使用可用來實現的百分比寬度/高度。

我前加給你的CSS工作:

.checkbox label.namechk { 
    width: 100%; 
    float: left; 
    margin: 0; 
} 

label.namechk svg { 
    padding-left: 50px; 
    width: 100%; 
} 

不給你垂直居中,但這是儘可能我會絕對定位的元素去。

如果您想保留字體的形狀,您可能需要調查svgs支持的kearning/letter間距: