使用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縮放到完整窗口寬度

回答

相關問題