javacript로 전체 창 너비로 확대

Question

두 줄의 이미지 축소판을 넣으려고하고 있는데 각 이미지 위로 마우스를 가져 가면 전체 너비로 확대 할 수 있기를 원합니다. 이미지가 아래쪽으로 자라기를 바랍니다. 나는 지금까지 이미이있어 :

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

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

내가 찾고 일부 사양 : - 썸네일 높이 : 5VW (또는 200 픽셀) - 항상 원래의 화면 비율을 유지 - 이웃 축소판 유지한다 - 확대/축소 된 이미지가 다음 줄로 넘어 가지 않아야합니다. - 확대/축소하면 이미지가 전체 파일 해상도로 표시되어야합니다. - 데스크톱과 모바일 모두에서 합리적으로 작동해야합니다 (= 마우스가 아닌 클릭).

어떻게 이것을 수행 할 수 있습니까?

Answer 1

자바 스크립트가 필요하지 않습니다.

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>