javacriptでフルウィンドウ幅にズーム

Question

イメージのサムネールを2行並べて表示しようとしていますが、それぞれのイメージをホバリングしてウィンドウの全幅にズームしたいと考えています。私はイメージが下方に成長したい。私はこれまですでにこれを得た：

https://jsfiddle.net/jimhoyle/tfkgcxx7/

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

私が探しているいくつかの仕様： - サムネイルの高さ：5vw（または200pxの） - 常に元の縦横比を 保つ - 隣人のサムネイルが滞在する必要があります - ズームした画像が次の行にジャンプしないようにする - ズームしたときに画像がフルサイズで表示される - デスクトップとモバイルの両方で合理的に動作する必要があります（=ホバーの代わりにクリックします）

これを達成するには？

Answer 1

javascriptは必要ありません。

flexを使用して純粋なCSSでこれを達成できます。

イメージはすべての場合（display: flex）、ターゲットイメージコンテナを他のものよりも10倍大きくなるように強制することができます（通常の場合はflex: 1、アクティブの場合はflex: 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>