ズームイン画像（JavaScript）

Question

私はポラロイドのギャラリー画像のスタイルを持っています。しかし、私が望むのは、画像をクリックすると画像が拡大または拡大されます。

私はelseステートメントでそれを達成する方法を知りません。私は画像をクリックしたときに、それをflippしようとしましたが、それは次のように機能します。

.photo.flipped .side-front { 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
} 

.photo.flipped .side-back { 
    -webkit-transform: rotateY(0); 
    -moz-transform: rotateY(0); 
    -ms-transform: rotateY(0); 
    transform: rotateY(0); 
} 

JavaScriptの：

item.addEventListener('click', function() { 
    if ((currentData != dataSize[item.id]) || (currentData == null)) { 
    select(dataSize[item.id]); 
    shuffleAll(); 
    } else { 
    /*Paul Zoom In Photo*/ 
    item.classList.contains('zoomed') === true ? item.classList.remove('zoomed') : item.classList.add('zoomed'); 
    /*END*/ 
    } 
}); 

そして、これは私のCSSです：

body { 
    background-color: #F2EBE2; 
} 

.fullscreen { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 

.photo { 
    position: absolute; 
    cursor: pointer; 
    -webkit-transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    transition: all 0.6s; 
} 

.side { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 

    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 

    -webkit-transition: transform 0.6s; 
    -moz-transition: transform 0.6s; 
    transition: transform 0.6s; 
} 

.side-back { 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
    display: table; 
} 

.side-back div { 
    display: table-cell; 
    vertical-align: middle; 
    background-color: rgb(0, 0, 0); 
} 

.side-back p { 
    padding: 2px; 
    color: #d7551d; 
    font-family: Helvetica, Arial, sans-serif; 
} 


figure { 
    width: 150px; 
    position: absolute; 
    /* padding: 30px; */ 
    margin: 0 auto; 
    text-align: center; 
    background-color: rgb(10, 10, 10); 
} 

figure img { 
    height: auto; 
    max-width: 100%; 
    margin: 0 auto; 
    /*margin-bottom: 15px;*/ 
} 

figure img.zoomed{ 
    position: fixed; 

    top: 5vh; 
    bottom: 5vh; 
    left: 5vw; 
    right: 5vw; 

    max-width: 90vw; 
    max-height: 90vh; 

    margin: auto; 

    border: 4px solid #000 
} 

figure figcaption { 
    font-family: Comic Sans, Comic Sans MS, cursive; 
    color: #f85a16; 
    font-size: 10px; 
} 

.navbar { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    padding: 10px; 
    text-align: center; 
    background-color: black; 
    z-index: 999; 
} 

button { 
    background-color: transparent; 
    padding: 10px 24px; 
    color: #ffffff; 
    border: 2px solid black; 
    -webkit-transition-duration: 0.4s; 
    -moz-transition-duration: 0.4s; 
    transition-duration: 0.4s; 
} 

button:hover { 
    background-color: #a00; 
    color: white; 
} 

#copyright { 
    font-family: Consolas, Verdana, Arial, sans-serif; 
    position: fixed; 
    color: #ccc; 
    text-decoration: none; 
    bottom: 20px; 
    right: 10px; 
} 

#copyright:hover { 
    color: white; 
    text-decoration: none; 
} 

@media screen and (max-width: 767px) { 
    #forkme { 
    display: none; 
    } 

    #copyright { 
    position: relative; 
    display: block; 
    text-align: center; 
    right: 0px; 
    bottom: 0px; 
    } 
} 

Answer 1

ワン方法は、前述のように、使用することですtransform: scale(2);

もう一つの簡単な方法は次のとおりです。

document.querySelector('img.sample-image').addEventListener('click', function() { 
 
    this.classList.toggle('sample-image-large'); 
 
});

.sample-image { 
 
    transition:all 1s ease; 
 
    width: 100%; 
 
} 
 

 
.sample-image-large { 
 
    width: 200% !important; 
 
}

<img src="http://c.s-microsoft.com/en-us/CMSImages/Explore_ShareBG_0330_1600x560_EN_US.jpg?version=19f9bdc2-cbab-929d-bd00-48f537b9f7e8" class="sample-image">