根据最宽的图像缩放SVG图像，保持比例

我正在寻找一种方法来缩放多个图像，但有些复杂的标记（请指出，如果您看到某些可以更改以实现此目的，同时保持相同的功能）。根据最宽的图像缩放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>

来源

2014-02-06 INT

不知道我明白你要在这里完成什么。如果要在保持高度的同时扩大宽度，这将导致延伸字符。或者，如果你想增加高度和宽度来填充空间，但这将不必要的重点放在较短的名字上。 SVG可以使用可用来实现的百分比宽度/高度。

我前加给你的CSS工作：

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

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

不给你垂直居中，但这是尽可能我会绝对定位的元素去。

如果您想保留字体的形状，您可能需要调查svgs支持的kearning/letter间距：

来源

2014-02-06 21:45:45 stakolee

根据最宽的图像缩放SVG图像，保持比例

回答

相关问题