如何在移动设备上使用纯JavaScript放大单击的图像
如何在移动设备上使用纯JavaScript放大单击的图像
提问于 2014-05-14 05:06:30
我正在尝试创建点击时放大的缩略图。目标是让选定的缩略图将自身放大到设备的最大宽度。如果单击另一个缩略图，其图像将替换当前所选缩略图的图像。一次只能放大一个缩略图。
图像应跨越设备的最大宽度。另外，我正在尝试用普通的JavaScript (没有jQuery)、CSS和HTML来实现这一点。
JavaScript
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}HTML
<img src="./Images/image.jpg" alt="1.jpeg" style="cursor:pointer"
onclick="showImage('./Images/image.jpg');">
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;">CSS
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0;
width:100%;
height:100%;
background-color: rgba(100,100,100, 0.5);
}图像确实会弹出，但它太大(比设备的宽)，所以它不适合移动屏幕。我如何使它的大小合适？
回答 1
Stack Overflow用户
发布于 2014-05-14 05:32:43
您需要将图像宽度约束为父容器的宽度。
#largeImg {
height: auto;
max-width: 100%;
}这将强制图像不大于它所在的容器，并在较小的屏幕上自动缩小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23641576
复制相关文章
相似问题