1

Question

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

我有一些有用的代码，但有三件事我无法弄清楚如何完成。按重要性排序。

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;
}

使图像展开点击不大于浏览器

1 个答案:

1

2：

3：