Question

我正在尝试重新创建一个交互式图片库，用户在该图片库上单击图片，然后将该图片展开以使用户看到比实际更大的图片。一切运行平稳，但是一旦按下图像并将其扩展，页面就会变得更大，背景图像也会移动一点，从而为用户提供了上下左右滚动的机会。我出于审美原因不喜欢它，而背景图像的移动对我的口味来说有点奇怪。我认为这与显示扩展图像的容器div的margin属性有关，因为我测试了将margin设置为非常高的数字，并且当数字显示时，它确实在图像底部留出了很多空间高。我给你的代码：

HTML

<div class="row">
    <div class="column">
        <img src="1st project\labeleven.jpg" alt="" style="width:100%" onclick="myFunction(this);">
        <img src="1st project\labfive.jpg" alt="" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="1st project\labsix.jpg" alt="" style="width:100%" onclick="myFunction(this);">
        <img src="1st project\labseven.jpg" alt="" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="1st project\labtwo.jpg" alt="" style="width:100%" onclick="myFunction(this);">
        <img src="1st project\labeight.jpg" alt="" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="1st project\labnine.jpg" alt="" style="width:100%" onclick="myFunction(this);">
        <img src="1st project\labten.jpg" alt="" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="1st project\labthree.jpg" alt="" style="width:100%" onclick="myFunction(this);">
        <img src="1st project\labfour.jpg" alt="" style="width:100%" onclick="myFunction(this);">
    </div>
</div>
<div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:560">
    <div id="imgtext"></div>
</div>

JavaScript

<script>
    function myFunction(imgs) {
        var expandImg = document.getElementById("expandedImg");
        var imgText = document.getElementById("imgtext");
        expandImg.src = imgs.src;
        imgText.innerHTML = imgs.alt;
        expandImg.parentElement.style.display = "block";
    }
</script>

CSS

/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 170;
    margin-left: 10px;
    position: relative;
    left: 20px;
    top: -15px;
}

/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
    width: 100px;
    height: 100px;
    margin-top:2px;
}

.column img:hover {     
    opacity: 1;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    position: relative;
    display: none;
    left: 376px;
    top: -230px;
}

/* Closable button inside the image */
.closebtn {
    position: absolute;
    top: 10px;
    left: 500px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

PS：我确实使用了w3schools网页上的代码。

Answer 1

解决方案：我认为出于美学原因，您想使用模式来打开前景中的每个图像。在此处尝试以下链接：https://www.w3schools.com/howto/howto_css_modals.asp，在w3学校中您还将获得模态要点。

说明：单击图像时，一切都会变得难看的原因是100％表示图像具有的尺寸属性（甚至可能不完全相同）。您可以尝试提供固定像素而不是百分比，但这会使它无响应。您可以使用vw and vh来考虑视口的宽度和高度，但是对于图像库来说，优雅的解决方案是使用模态。

最新编辑：当我在绝对定位中看到负值时，我的皮肤就会爬行。通常对此不满意，因此在使用时请确保you REALLY understand them。

Answer 2

我稍微修改了CSS，请尝试以下方法：

/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 170;
    margin-left: 10px;
    position: relative;
    left: 20px;
    top: -15px;
}

/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
    width: 100px;
    height: 100px;
    margin-top:2px;
}

.column img:hover {     
    opacity: 1;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
     text-align: center;
}

#expandedImg {
  margin-top: 16px;
}

.closebtn {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  color: white;
  cursor: pointer;
}

最重要的更改在底部。

页面滚动显示

2 个答案: