Question

我正在寻找一种通过稍微复杂的标记来缩放多个图像的方法（如果你看到可以改变的东西，请保持相同的功能，请告知你。）

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

标记的输出在下方，这是一个未完成的 DEMO
我正在努力寻找 HERE 的外观的视觉参考（这个不会按照它应该缩放，但会显示在缩放到容器宽度时图像列表应该如何显示）。< / p>

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

Answer 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

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

1 个答案: