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

【问题标题】：Scale SVG images according to the widest image, keep ratio根据最宽的图像缩放 SVG 图像，保持比例
【发布时间】：2014-02-07 05:45:45
【问题描述】：

我正在寻找一种使用有点复杂的标记来缩放多个图像的方法（如果您发现可以更改以实现此目的，同时保持相同的功能，请告知）。

这个想法是最宽的图像将设置所有其他图像的大小。因此，当浏览器窗口缩小并展开时（这将调整带有蓝色边框的容器），它会将所有图像的大小调整为所述容器的宽度（所有图像的高度必须始终保持相同，以便没有文本会看起来比另一个大）。

以下是标记的摘录，这是未完成的DEMO
我正在为 HERE 努力的外观的视觉参考（这个不会按原样缩放，但会显示图像列表在缩放到容器宽度时的外观）。

<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>

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

不确定我是否理解您在这里想要完成的任务。如果你想在保持高度的同时扩大宽度，这会导致字符被拉长。或者，如果您想增加高度和宽度以填充空间，但这会不必要地强调较短的名称。 SVG 可以使用百分比宽度/高度，您可以使用这些百分比来实现。

我通过将它添加到您的 CSS 中来让前者工作：

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

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

不给你垂直居中，但我将使用绝对定位的元素。

如果您想保留字体的形状，您可能需要研究 svgs 支持的字距/字母间距：http://tutorials.jenkov.com/svg/text-element.html#letter-spacing-kerning

【讨论】：