防止图像失焦

Question

点击缩略图后，是否可以防止较大的图像失焦？

div.gallery img{
	height: 70px;
	width: 140px;
} 
#LargeImage{	
	display: none;
	height:100vh;
	left:0px;
	position:absolute;
	top:0px;
	width:100vw;
}	

	<div class="gallery"><img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg"onclick="PreloadImage(this)"></div>
	<img src="" id="LargeImage" onclick="ShowThumbnail()">

{{1}}

填料！填料！填料！

Answer 1

你在这里：

'use strict';
var my_image,
	my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
	y = document.getElementById('LargeImage');
function showImage(){
	var stats = document.getElementById('stats'),
		y = document.getElementById('LargeImage');
	stats.innerHTML = 'Ready, rendering...';
	while(!y.complete){
		setTimeout(function() {showImage()}, 10);
	}
	y.style.display = 'block';
	setTimeout(function() {stats.innerHTML = '';}, 3000);
	
}
function PreloadImage(theElement) {
	var my_image,
		my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',
		stats = document.getElementById('stats'),
		y = document.getElementById('LargeImage');
	stats.innerHTML = 'Loading...';
	y.style.display = 'none';
	my_image = new Image();
	my_image.src = my_imageSrc;
	y.src = my_imageSrc+"?"+Date.now();
}
function ShowThumbnail() {
	var y = document.getElementById('LargeImage');
	y.style.display = 'none';
}

div.gallery img{
	/*height: 70px;*/ /* EDIT - commented to keep aspect ratio */
	width: 140px;
} 
#LargeImage{	
	display: none;
	/*height:100vh;*/ /* EDIT - commented to keep aspect ratio */
	left:0px;
	position:absolute;
	top:0px;
	width:100vw;
}

	<div class="gallery">
		<img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" onclick="PreloadImage(this)">
	</div>
	<span id="stats"></span>
	<img src="" id="LargeImage" onclick="ShowThumbnail()" onload="showImage()">

一旦您的图片宽度高于高度，您只需要设置新的宽度，让浏览器使用新的高度进行操作

修改

如果您在大图像出现时不想要滚动条，请添加到您的css（考虑代码段范围）：

/* this will avoid the scroll bar */
body{overflow:hidden}

编辑2

如果图像的宽度需要适合屏幕/页面：

'use strict';
var my_image,
	my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
	y = document.getElementById('LargeImage');
function showImage(){
	var stats = document.getElementById('stats'),
		y = document.getElementById('LargeImage');
	stats.innerHTML = 'Ready, rendering...';
	while(!y.complete){
		setTimeout(function() {showImage()}, 10);
	}
	y.style.display = 'block';
	setTimeout(function() {stats.innerHTML = '';}, 3000);
	
}
function PreloadImage(theElement) {
	var my_image,
		my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',
		stats = document.getElementById('stats'),
		y = document.getElementById('LargeImage');
	stats.innerHTML = 'Loading...';
	y.style.display = 'none';
	my_image = new Image();
	my_image.src = my_imageSrc;
	y.src = my_imageSrc+"?"+Date.now();
}
function ShowThumbnail() {
	var y = document.getElementById('LargeImage');
	y.style.display = 'none';
}

div.gallery img{
	/*height: 70px;*/ /* EDIT - commented to keep aspect ratio */
	width: 140px;
} 
#LargeImage{	
	display: none;
	/*height:100vh;*/ /* EDIT - commented to keep aspect ratio */
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

	<div class="gallery">
		<img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" onclick="PreloadImage(this)">
	</div>
	<span id="stats"></span>
	<img src="" id="LargeImage" onclick="ShowThumbnail()" onload="showImage()">