如果我有一个N像素乘N像素的图像,我如何使用CSS/JS/jQuery使其填充一个say。。。2N像素乘2N像素空间?
详细信息:我更像是一名后端开发人员,但我目前正在实现一种"放大"功能,点击一张图像,它会用一张更大的图像替换它,然后调整<img>
标签所在的<div>
的大小,以占用更多空间并有效地"放大"(或者实际上只是取消放大一张大图像)。
我需要做的(用户体验):在等待加载较大的图像时,我希望用户仍然能够"缩放",但由于较大的图像尚未加载,他们只会得到图像的颗粒版本,直到它被更高分辨率的图像取代。
相应地更改IMG
元素的width
和height
属性。
或者,使用相同名称的CSS属性。请注意,在CSS中,width
和height
必须具有单位(对于图像,通常为px
)。
这可能有效:
var img = $("img");
$("div").click(function()
{
img.css("width",img.width()*2);
img.css("height",img.height()*2);
}
我使用toggleClass
、transform: scale
和transition
组合了一些东西。
单击图像将在一秒钟内调整其大小,同时加载较大的图像。然后,它将在过渡结束时拾取点,或者在加载图像所需时间比过渡持续时间更长的情况下,在完成加载时附加图像。在期间切换转换会过于复杂,我一开始尝试过。还要在父对象上使用addClass
进行检查,这样它只会加载一次较大的图像,而不会在每次切换时进行放大。
笔
$('div').click(function() {
var div = $(this),
img = div.find('img'),
path = img[0].src.replace('.jpg', ''),
ended, loaded;
img.toggleClass('zoom');
if (!div.hasClass('large')) {
div.addClass('large');
var big = new Image();
big.src = path + '_large.jpg';
img.one('transitionend', function() {
ended = true;
if (loaded) replaceImage(big);
});
$(big).one('load', function() {
loaded = true;
if (ended) replaceImage(big);
});
}
function replaceImage(grand) {
if (img.hasClass('zoom')) $(grand).addClass('zoom');
div.html(grand);
}
});
body {
text-align: center;
background: grey;
overflow: hidden;
}
div {
display: inline-block;
}
div img {
width: 400px;
-webkit-transition: -webkit-transform 1s linear;
transition: transform 1s linear;
-webkit-transform-origin: center top;
transform-origin: center top;
}
.zoom {
-webkit-transform: scale(2);
transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="//www.anony.ws/i/2015/11/19/yosemite.jpg" alt="">
</div>
它从原始图像中获取路径,并将_large
添加到其中。因此,在这种情况下,图像必须位于同一文件夹中,并且除了额外的扩展之外,基本上命名相同。
经过编辑以确保只有当原始图像也包含zoom
类时才应用该类。这可以解决用户在加载大版本之前多次单击时出现的问题。