javascript - 使图像在点击时扩展到不大于浏览器

Question

我正在尝试使用一些 javascript，以便用户可以点击一些缩略图，每个缩略图都会显示得更大。

我有一些有效的代码，但有 3 件事我不知道如何完成。按重要性排序。

1 - 图像显示不应大于浏览器窗口。目前我有一个相当大的图像，如果分辨率非常小，会导致它显示得比浏览器大并截掉部分图像。

2 - 我也想为图像设置一个最大尺寸，这样它就不会变得很大。目前它会填满屏幕，直到一个维度(垂直或水平)至少达到最大值。

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:

试试这个:

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

2:

试试这个:

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

3:

执行此操作的一个好方法是使用 position: absolute。对于每个图像，您应该在图像周围制作一个容器并将其设置为 position: relative。在容器内部，连同图像，您应该有一个 position: absolute 文本标记，无论您想要它在哪里。

例如，此代码会将图像文本放在图像的左上角。

html

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

CSS

.img-container {
  position: relative;
}

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