我正在开展一个项目,我需要上传复制粘贴到浏览器中的屏幕截图。系统可以工作,但我有一个问题是单击图像以全屏显示它们。
我做了JSFiddle的样子:
<div id="screenshot-container" class="vertical-scroll-div">
<div id="editor" contenteditable="true"> </div>
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
</div>
.vertical-scroll-div {
width: 100%;
padding-top: 10px;
height: 220px;
min-height: 220px;
overflow-x: auto;
white-space: nowrap;
border: 2px dashed #a9a9a9;
}
#editor {
position: absolute;
top: 0px;
width: 100%;
height: 220px;
outline: 0;
}
.screenshot {
margin-left: 10px;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
}
.screenshot:hover {
cursor: pointer;
border: solid 2px #3498db;
}
编辑器div
无法用作父级,因为在插入新的image
时会将其清除。
希望有人有个主意。
由于
答案 0 :(得分:1)
只需将这些属性添加到.screenshot
选择器:
.screenshot {
position: relative;
z-index: 10;
}
答案 1 :(得分:0)
使用此css
.screenshot {
height: 200px;
margin-left: 10px;
max-height: 200px;
max-width: 200px;
position: relative;
width: 200px;
z-index: 5;
}