チェックボックスを使用して、サイズ変更されたサイズと元のサイズをスクロールバーで切り替える

Question

マスターhtmlテンプレートを使用してさまざまな製品のhtmlページを作成するアプリケーションがあります。各製品には、アプリ内で割り当てられた複数の写真があります。このアプリは、内部ループを使用して各写真のimgタグをマスターテンプレートのコピーに自動的に挿入し、その製品のウェブページを生成します。

各画像が最初に表示されたら、親コンテナ分割に合わせてサイズを変更する必要があります。ユーザーが最初に画像をクリックすると、親コンテナ内に縦横のスクロールバーが表示された状態で元のサイズで画像が表示されます。ユーザーが2回目に画像をクリックすると、拘束されたサイズに戻ります。ユーザーが画像をクリックしたときに親コンテナのサイズが変更されることはありません。

これを行うには入力チェックボックスを使用しようとしていますが、前後に切り替えるコードを取得できないようです。

私がしようとしているのは、画面の幅の90％で自動的に表示される一連の垂直に積み重なったサムネイル画像を最初に見ることです。詳細を見たい場合は、画像をクリックして、親の部分でフルサイズの画像をスクロールしてもらいたいです。

これまで、私は単純なターゲットリンクを使ってフルサイズの画像を見ることができましたが、これは近い将来許可されません（つまり、オフサイトリンクは許可されません）。私はまた、スクリプト、iframe、または "アクティブコンテンツ"としてフラグが立てられるその他のテクニックを使用することはできません。

私は次のCSSとHTMLを使用しています。私はプログラム内の各画像のインデックス（0,1,2など）を使用して、各画像の属性に固有の入力IDとラベルを提供しました。したがって、第1の画像はこれらの属性のそれぞれに0を割り当て、第2の画像は1を有する。

.imgholder .checkimg{ 
    display:none; 
} 

.imgholder{ 
    position:relative; 
    width:90vw; 
    overflow:auto; 
    margin: 10px 0px; 
    clear: both; 
} 

img{ 
    max-width:100%; 
    max-height:100%; 
} 

.checkimg:checked ~ label img{ 

} 


<!--Begin Program Loop--> 

<div class="imgholder"> 
<input class="checkimg" type="checkbox" id="[[image.index]]"><label for="[[image.index]]"><img src="[[image.imageURL]]"></label> 
</div> 

<!--End Program Loop--> 

Answer 1

ここでは動作例を示す。これは主な機能を達成する方法を示しています。奇妙なアスペクト比のために歪んでしまう可能性があるため、画像のサイズを調整する必要があります。

.imgholder { 
 
    position: relative; 
 
    width: 90vw; 
 
    height: 300px; 
 
    overflow: auto; 
 
    margin: 10px 0px; 
 
    clear: both; 
 
} 
 

 
.imgholder .checkimg{ 
 
    display: none; 
 
} 
 

 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.checkimg:checked + img { 
 
    width: auto; 
 
    max-height: none; 
 
}

<div class="imgholder"> 
 
    <label for="i1"> 
 
    <input class="checkimg" type="checkbox" id="i1"> 
 
    <img src="http://lorempixel.com/g/1000/500"/> 
 
    </label> 
 
</div> 
 

 
<div class="imgholder"> 
 
    <label for="i2"> 
 
    <input class="checkimg" type="checkbox" id="i2"> 
 
    <img src="http://lorempixel.com/g/1000/500"/> 
 
    </label> 
 
</div> 
 

 
<div class="imgholder"> 
 
    <label for="i3"> 
 
    <input class="checkimg" type="checkbox" id="i3"> 
 
    <img src="http://lorempixel.com/g/1000/500"/> 
 
    </label> 
 
</div>