Question

所以多年来我一直在努力实现这一目标。基本上我的网站允许管理员上传目录中每个项目的缩略图和放大图像。缩略图显示在客户看到的页面上，放大显示在缩略图的悬停上。

我无法控制正在上传的图像的大小（我想我可以限制宽度和高度，但在这种情况下这是不切实际的。）

我想垂直和水平地居中这个图像放大。它包含在position: fixed;的div中。我相信（虽然我目前没有代码在我面前），我目前正在使用以下内容：

.image-enlargement
{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 400px;
    margin-left: -150px;
    margin-top: -200px;
}

我可能已将其更改为使用jQuery - 我记不起来，就在很久以前，当我上次在网站的这个位置工作时。现在我想用上面的代码做的是取出宽度，高度和边距规格，以便允许图像无论大小都精确居中，并且不使用JavaScript。

有没有人曾经实现过这个目标？如果是这样，怎么样？我确信必须有某种方法来实现这一结果，但没有遇到纯CSS / HTML解决方案。

编辑：JSFiddle http://jsfiddle.net/Y7xAp/。

Answer 1

不确定这在您的情况下会有多大用处，但解决此问题的方法是将图片显示为背景图片。代码可能如下所示：

#container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('myImage.jpg') center center no-repeat;
}

然后，浏览器将正确计算图像的垂直和水平居中位置。然后将事件放在onClick或类似的东西上，以检测他们何时希望图像消失。

Answer 2

如果你可以在这里张贴你的标记，那就太棒了，这样我们就能更好地帮助你。至于图像元素的大小，您可以指定它的宽度和高度，这样无论用户上传的图像大小，它仍然是相同的。您可以这样做，<img src="<image url>" height="100" width="100"/>

Answer 3

使用CSS水平和垂直居中div的最佳方法是通过弹性框。

在容器上使用display：flex，在内部元素上使用margin：auto。

请记住：这是新浏览器的一个很好的解决方案，容器应该具有高度和高度：flex正常工作。在这种情况下，我使用vh / vw单位（视口高度/宽度的1/100）。

尝试使用：

<html>
<head>
    <style>
        .box {
    float: left;
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    margin-right: 10px;
}
.highlight {
    background: #0000FF;
}

.fa-trash {
  color:red;
}

.fa-trash{
  color:green;
}
        </style>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
$(document).ready(function () {
    var flag = false;
    var $box = $('.box').mousedown(function () {
        $(this).toggleClass('highlight');
        if(flag) $('.fa-trash').css('color' , 'black');
        flag =  $(this).hasClass('highlight')
        $box.on('mouseenter.highlight', function () {
            $(this).toggleClass('highlight', flag);
        });
    });
    $(document).mouseup(function () {
        $box.off('mouseenter.highlight')
    })
});
    </script>
</head>
<body>
    <div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 
</body>
</html>

要了解有关flex-box和vw / vh单位的更多信息，请阅读：

垂直和水平居中的可变大小的图像放大（在div中）仅使用CSS和HTML

3 个答案: