フレックスボックスの画像選択

Question

フレックスグリッド内に4つの画像があるウィンドウがあります。私は画像をクリックするといいと思いますが、これはフレックスボックス内の他のものを常に覆っている（または隠しています）width=100%です。

jQueryとJavaScriptがありますが、私は方法を見つけることができません。どんな助け？

ありがとうございました。

.wrap {display: -webkit-box; 
 
display: -moz-box; 
 
display: -ms-flexbox; 
 
display: -webkit-flex; 
 
display: flex;} 
 

 
.container 
 
{box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset; 
 
display: -webkit-box; 
 
display: -moz-box; 
 
display: -ms-flexbox; 
 
display: -webkit-flex; 
 
display: flex; 
 
float:left;} 
 

 
.half 
 
{margin: 0.25rem;} 
 

 
.photo {width: 15rem; 
 
max-width:100%; 
 
}

<div class="wrap"> 
 
    
 
<div class="container"> 
 
<div class="half"> 
 
        <div id="quarter1"> 
 
<a href=""><img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" class="" alt="" title=""></a> 
 
        
 
        </div>  
 
        <div id="quarter2"> 
 
<a href=""><img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" class="" alt="" title="" ></a> 
 
        </div>      
 
</div> 
 
<div class="half"> 
 
        <div id="quarter3"> 
 
<a href=""><img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" class="" alt="" title="" ></a> 
 
        </div>  
 
        <div id="quarter4"> 
 
<a href=""><img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" class="" alt="" title="" ></a> 
 
        </div>     
 
</div> 
 
</div> 
 
</div>

Answer 1

私はあなたのHTML構造にいくつかの変更を行いました。以下のスニペットを実行します

var classname = document.getElementsByClassName("photoContainer"); 
 
\t var containerWidth = document.getElementsByClassName('container')[0].offsetWidth; 
 

 
\t var myFunction = function(ev) { 
 
    
 
    if(this.classList.contains('expandImage')) { 
 
    this.classList.remove('expandImage'); 
 
    for (var i = 0; i < classname.length; i++) { 
 
\t  \t classname[i].classList.remove('hideImage'); 
 
\t \t } 
 

 
    return; 
 
    } 
 
\t \t 
 
\t \t for (var i = 0; i < classname.length; i++) { 
 
\t  \t classname[i].classList.add('hideImage'); 
 
\t \t } 
 
\t \t this.classList.remove('hideImage'); 
 
\t \t this.classList.add('expandImage'); 
 
\t  this.style.width = containerWidth; 
 
\t \t 
 

 
\t }; 
 

 
\t for (var i = 0; i < classname.length; i++) { 
 
\t  classname[i].addEventListener('click', myFunction, false); 
 
\t }

.wrap { 
 
\t display: -webkit-box; 
 
display: -moz-box; 
 
display: -ms-flexbox; 
 
display: -webkit-flex; 
 
display: flex; 
 
} 
 

 
.container 
 
{box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset; 
 
display: -webkit-box; 
 
display: -moz-box; 
 
display: -ms-flexbox; 
 
display: -webkit-flex; 
 
display: flex; 
 
float:left; 
 
position: relative;} 
 

 
.half 
 
{margin: 0.25rem;} 
 

 
.photo {width: 15rem; 
 
max-width:100%; 
 
} 
 

 
.hideImage { 
 
\t display: none 
 
} 
 

 
.expandImage > img { 
 
    width: 100%; 
 
}

<div class="wrap"> 
 
    
 
<div class="container"> 
 
<div class="half"> 
 
        <div id="quarter1" class="photoContainer"> 
 
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" class="" alt="" title=""> 
 
        
 
        </div>  
 
        <div id="quarter2" class="photoContainer"> 
 
<img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" class="" alt="" title="" > 
 
        </div>      
 
</div> 
 
<div class="half"> 
 
        <div id="quarter3" class="photoContainer"> 
 
<img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" class="" alt="" title="" > 
 
        </div>  
 
        <div id="quarter4" class="photoContainer"> 
 
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" class="" alt="" title="" > 
 
        </div>     
 
</div>