使用 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>

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

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

Answer 4

https://jsfiddle.net/dafemtg1/

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

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

Answer 5

对你不想移动的元素尝试 css position:absolute

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

Answer 6

将 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;
}