画像をブラウザ上で拡大表示する

Question

ユーザーがいくつかのサムネイル画像をクリックしてそれぞれが大きく表示されるように、いくつかのJavaScriptを利用しようとしています。

私はいくつかのコードがありますが、達成する方法を理解できない3つのことがあります。重要性の順に。

1 - 画像はブラウザウィンドウより大きく表示されません。現在、私はかなり大きな画像を持っており、実際には小さな解像度では、これがブラウザより大きく表示され、画像の一部が途切れてしまいます。

2 - 画像に最大サイズを設定したいので、巨大にならないでしょう。現在は、1つの次元（垂直または水平）が少なくとも最大になるまで画面を塗りつぶします。

3 - これを閉じる方法をユーザーに提案する書式がいくつかあります。私は手動で各画像に「どこでもクリックして閉じる」というテキストを追加できますが、画像を編集する必要はありません。

PS - 私は物事について正しい言葉を知らないことを謝ります。私が今持っている何

：

Javascriptを

 function showImage(smSrc, lgSrc) { 
      document.getElementById('largeImg').src = smSrc; 
      showLargeImagePanel(); 
      unselectAll(); 
      setTimeout(function() { 
       document.getElementById('largeImg').src = lgSrc; 
      }, 0) 
     } 
     function showLargeImagePanel() { 
      document.getElementById('largeImgPanel').style.display= 'block'; 
     } 
     function unselectAll() { 
      if(document.selection) document.selection.empty(); 
      if(window.getSelection) window.getSelection().removeAllRanges(); 
     } 

とCSS/HTML

<style type="text/css">#largeImgPanel { 
      text-align: center; 
      display: none; 
      position: fixed; 
      z-index: 100; 
      top: 0; left: 0; width: 100%; height: 100%; 
      background-color: rgba(100,100,100, 0.5); 
     } 

<p>Please click on each image thumbnail to enlarge. Click again to return to this view.</p> 
<br /> 
<img onclick="showImage(this.src, 'http://surveygizmolibrary.s3.amazonaws.com/library/75649/C2ErrorComparisonA.png');" src="http://surveygizmolibrary.s3.amazonaws.com/library/75649/C2ErrorComparisonAThumb.png" style="cursor: pointer; border-width: 1px; border-style: solid;" />               <br /> 
<br /> 
<img onclick="showImage(this.src, 'http://surveygizmolibrary.s3.amazonaws.com/library/75649/C2ErrorComparisonB.png');" src="http://surveygizmolibrary.s3.amazonaws.com/library/75649/C2ErrorComparisonBThumb.png" style="cursor: pointer; border-width: 1px; border-style: solid;" />               <br /> 
<br /> 
<img onclick="showImage(this.src, 'http://surveygizmolibrary.s3.amazonaws.com/library/75649/C2ErrorComparisonC.png');" src="http://surveygizmolibrary.s3.amazonaws.com/library/75649/C2ErrorComparisonCThumb.png" style="cursor: pointer; border-width: 1px; border-style: solid;" />                 

Answer 1

1：

このお試しください：これはposition: absoluteを使用している行うには良い方法

：

#largeImgPanel img { 
    max-width: (insert whatever you want here)px; 
    max-height: (insert whatever you want here)px; 
} 

3：これを試してみてください

：

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

2。それぞれの画像に対してコンテナを作成し、position: relativeに設定する必要があります。コンテナーの内側には、イメージと共に、テキストタグがある必要があります。position: absoluteが必要です。

たとえば、このコードでは画像の左上隅に画像のテキストが配置されます。

HTML

<div class='img-container'> 
    <img src='img.jpg'/> 
    <p class='img-text'>Text for image</p> 
</div> 

CSS #largeImgPanelがあなたのhtmlであり、どのようにそれが行われている？

.img-container { 
    position: relative; 
} 

.img-text { 
    position: absolute; 
    top: 0; 
    left: 0; 
}