时间戳

首页 > 解决方案 > 在设备之间缩放的三个链接图像

html - 在设备之间缩放的三个链接图像

问题描述

我需要三个你可以点击的链接。问题是它们不能针对其他设备进行扩展。我还需要能够为图像顶部的每个链接命名，这就是我所拥有的。

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>

标签： htmlcss

解决方案

添加一点 CSS 来缩放图像。

#thumbs {
  display: flex;
  width: 100%;
}

a {
  width: 33%;
}

img {
  width: 100%;
}
<div id="thumbs">
  <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt="" /></a>
  <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt="" /></a>
  <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt="" /></a>
  <span class="stretch"></span>
</div>

推荐阅读