使用CSS（或jQuery）放大图像，而无需移动页面上的其他内容

Question

我有一组动态生成的图像（每个图像附近都有注释）。我希望显示最大宽度和最大高度为48像素的每个图像，但是当用户将鼠标悬停在图像上时，它会增长到最大宽度和最大高度200像素。但是没有移动页面上的其他内容。这是生成图像的代码：

$(function(){
        $.getJSON("inc/API.php", 
        {command : "getUserComments", userid : getQueryStringValue("userid")},
        function(result)
        {
        for (var i = 0; i<6; i++){
            $("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+
            result[i].commentDateAndTime+"</div><div id='divUserDetail'><div id='divUserpic'>
       **<img src='images/"+result[i].imageFileName+"' class='commentpic' />**</div>
            <div id='divUsername'>Comment for <a href='rank.html?imageID="+result[i].imageID+
            "&imageFileName="+result[i].imageFileName+"'>"+result[i].imageHeader+
            "</a></div></div><div id='divCommentText'>"+result[i].comment+"</div></div>");
        }
    });
});

我用2 **标记了图像。这是CSS：

.userpic, .commentpic
{
max-height:48px;
max-width:48px;
border-radius:5px;
z-index:1;
position:relative;
}
.commentpic:hover
{
max-width: 200px;
max-height: 200px;
position:relative;
z-index: 50;
}

它会放大图像，但也会移动图像右侧和图像下方的所有其他内容。

如何使用CSS（最好）或使用jQuery使图像更大，而不用移动其他所有内容？谢谢！

Answer 1

您可以尝试将.commentpic的位置设置为绝对值。

你可以在这里看到一个例子：http://jsfiddle.net/HkPCp/3/

我认为这是你想要的行为，对吗？

编辑：我更新了jsFiddle，以便它不会移动其他元素。

这是正确的行为吗？

Answer 2

将每个图像放入具有设定宽度和高度的容器中。您的容器溢出将是可见的。

流出的任何东西都是可见的，但不会影响内容。

http://jsfiddle.net/ck6MG/

Answer 3

它在这里使用jQuery：

<div id="enlarge_img"></div>

<style type="text/css">
   div#enlarge_img {
       display: none;
       height: 200px;
       line-height: 200px;
       position: absolute;
       text-align: center;
       width: 200px;
   }

   div#enlarge_img > img {
       max-height: 200px;
       max-width: 200px;
   }
</style>

<script type="text/javascript">
$(function() {
    $('body img').bind('mouseover', function() {
        var offset = $(this).offset();

        $('div#enlarge_img').show().css({
            'left' : offset.left - ((200 - $(this).width()) / 2),
            'top' : offset.top- ((200 - $(this).height()) / 2),
        }).html('<img src="'+$(this).attr('src')+'" />');
    });

    $('div#enlarge_img > img').live('mouseout', function() {
        $('div#enlarge_img').hide();
    });
});
</script>

基本上你有一个absolute div隐藏，直到你徘徊img，然后将自己定位到img所在的位置并显示相同的图像，但更大。图像从中心增加，不会影响结构的其余部分，因为它是absolute。

如果你愿意，我可以添加动画。

Answer 4

尝试使用css position:absolute来获取您不想移动的元素

把z-index放在你想要显示在顶部的那些元素上

Answer 5

将class =“userpic-container”添加到图像的父div并尝试此CSS：

.userpic-container {
    position: relative;
    height: 48px;
    width: 48px;
}

.userpic, .commentpic {
    border-radius: 5px;
    position: absolute;
    height: 48px;
    width: 48px;
    z-index: 1;
}
.commentpic:hover {
    height: 200px;
    width: 200px;
    z-index: 10;
}

Answer 6

https://jsfiddle.net/dafemtg1/

仅供参考，使用transform属性的CSS：

img{transition:all 0.2s;}
img:hover {transform:scale(1.4);transition:all 0.2s;}