使用javascript缩放到完整窗口宽度

我正在尝试放置几行图像缩略图，我希望能够通过将鼠标悬停在每个图像上将它们缩放到窗口的全宽。我希望图像向下增长。我得到这个已远：使用javascript缩放到完整窗口宽度

div { 
    transition: all 0.2s ease-in-out; 
} 
div:hover { 
    width: 95%; 
}

我在寻找一些规格： - 缩略图高度：5VW（或200像素） - 始终保持原始的宽高比 - 邻居缩略图应该留在放大时放置到位 - 放大的图像不应跳到下一行 - 放大时图像应显示完整文件分辨率 - 应在桌面和移动设备上合理工作（=单击而不是悬停）

如何做到这一点？

来源

2017-04-18 Jim Hoyle

你不需要JavaScript的。

您可以使用flex在纯CSS中实现此功能。

图像可以被强制在所有情况下（display: flex）对齐，然后有针对性的图像容器比别人（flex: 1在常规情况下和flex: 10为活动的情况下）的10倍。

可以使用锚点和:target CSS选择器来设置移动版本。

下面是这个解决方案的实现。

.container { 
 
    display: flex; 
 
    width: 100%; 
 
    max-height: 220px; 
 
} 
 

 
.container > a { 
 
    flex: 1; 
 
    align-items: center; 
 
    text-align: center; 
 
    transition: flex 0.2s; 
 
    line-height: 0; 
 
} 
 

 
.container > a:hover, .container > a:target { 
 
    flex: 10; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="container"> 
 
    <a href="#1" id="1"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/1a/31/59/1a3159e4c899e2fd71b5fe58d0c2b5a9.jpg"/> 
 
    </a> 
 
    <a href="#2" id="2"> 
 
    <img src="https://ivymosquito.files.wordpress.com/2013/09/fox-eyes.jpg" /> 
 
    </a> 
 
    <a href="#3" id="3"> 
 
    <img src="http://static.boredpanda.com/blog/wp-content/uploads/2016/07/fox-faces-roeselien-raimond-red-fox.jpg"/> 
 
    </a> 
 
</div>

来源

2017-04-18 11:51:28 gaelgillard

谢谢！ Flex看起来非常有用。然而这并不是我正在寻找的。我正在寻找一种解决方案，它可以缩放到（水平）全屏，而缩略图都是一定的高度。或者实际上90％的宽度是更好的，因为可以保留flex产生的缩小缩略图。作为奖励，如果身高限制在窗口大小（适合宽度/高度，以先出现最大者为准），那就太好了。 –

这是肯定的基本实施。您可以使用flex和我的代码作为起点来实现此目的。 – gaelgillard

使用javascript缩放到完整窗口宽度

回答

相关问题