利用可能なスペースを埋めるために拡大するスクロール可能な分割で100％のCSSイメージ

Question

このコードは、100％のイメージを示しています。画像が大きすぎてこのコードが挿入されるスペースに100％で表示されないため、スクロールバーを使用して表示する必要があります。

<div style="overflow: auto; margin: auto; margin-bottom: 1em;"> 
<img src=""> 
</div> 

このコードは、500px x 500pxの範囲内のスクロールバーで100％の画像を示しています。私はしません;ただし、外側の分割には固定サイズが必要です。

<div style="width: 500px; height: 500px; overflow: auto; margin: auto; margin-bottom: 1em;"> 
<img src=""> 
</div> 

スクロールバーを使用してフルサイズの画像を見るための画像ビューアとして機能するように、外側の分割を調整したいと考えています。

1. 私は、私にはわからないと視聴者のモニターによって変わる可能な水平方向のスペースを埋めるために外側の分裂をしたいです。高さは自動的に調整する必要がありますが、垂直方向に積み重ねられた一連の画像ビューア分割が存在するため、利用可能な領域を埋めることはありません。

2. 私が挿入するイメージは大きく、99.9％の時間が利用可能なスペースを超えてしまいますので、スクロールバーが必要です。

3. ピクチャを外側区画のサイズにリサイズしたり、その逆にしないようにします。

4. スクリプトやアクティブコンテンツは使用できません。それは純粋なCSSとhtmlのみでなければなりません。

5. アプリケーションが画像コードをループ経由で挿入し、アプリケーションに画像の幅やサイズを挿入する機能がないため、画像のピクセルサイズをハードコードできません。

Answer 1

これはiframeでも、幅100％のoverflow: scrollでも可能です。それはあなたが把握する必要がある高さです。メディアのクエリを高さに使うことをお勧めします。

ここには、あなたが探しているものにかなり近いと思うサンプルjsfiddleがあります。再び、あなたの身長はあなたが把握しなければならないものです。あなたが指定しない限り、親divは常に子供の完全な高さを占めます。

.image-wrapper { 
 
    width: 100%; 
 
    height: 50vh; /* as suggested below in another answer, or you can use media queries */ 
 
    overflow: scroll; 
 
}

<div class="image-wrapper"> 
 
    <img src="http://www.spyderonlines.com/images/wallpapers/image/image-20.png"> 
 
</div>

https://jsfiddle.net/adpro/bt7aar4b/

Answer 2

width: 100%で外側ラッパーを保ち、あなたのユースケースに合った高さを把握。応答性のために

、私はそれはそれは（私はここでは例として50vh取っています）を埋めるか、使用可能な高さを超えて伸びないようにviewport unitsに基づいて高さを選択するために、より良いあなたに合っ取得

もたぶんthisあなたを助けます。以下

スニペット：情報について

body{ 
 
    margin: 0; 
 
} 
 
*{ 
 
    box-sizing: border-box; 
 
} 
 
.wrapper{ 
 
    overflow: auto; 
 
    border: 1px solid; 
 
    width: 100%; 
 
    height: 50vh; /* adjust/omit this as per your requirement*/ 
 
} 
 
.wrapper img{ 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/1500x1500"> 
 
</div>