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

Posted 2023-03-05

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

【英文标题】：Vertically and horizontally centred variable sized image enlargement (in div) using CSS and HTML only

【发布时间】：2011-06-16 06:52:13

【问题描述】：

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

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

我想将此图像放大图垂直和水平居中。它包含在带有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 解决方案。

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

【问题讨论】：

刚刚在我最近的尝试中添加了一个 JSFiddle - 显然它不起作用，因为 -50% 边距正在使用容器的宽度/高度。不过，应该相对容易看出我想要做什么。

How to horizontal & vertical center a div?的可能重复

另见***.com/questions/2726219/…和***.com/questions/2498552/…和***.com/questions/4416130/…和***.com/questions/4460677/…和...等

“另请参阅 ***.com/questions/2726219/... 和 ***.com/questions/2498552/... 和 ***.com/questions/4416130/... 和 ***.com/questions/4460677/...等等。”呃，是的，他们都解决了使用我现在使用的确切方法 - 但我确实不想使用该方法，因为它在涉及不同图像时不灵活尺寸。请重新阅读该问题，是否有人投票结束（如果基于这些“重复”问题）请取消投票？

【参考方案1】：

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

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

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

【讨论】：

认为这可能有效 - 我会尝试一下。我动态创建包含图像的 div，因此在其中添加 style="background: transparent url('bla') center center no-repeat" 应该很简单。谢谢。如果有效，将标记为答案。

我看到它不起作用的唯一方法是图像太大，就像占据整个屏幕一样。但我对 VB.Net 的了解足以在上传图像时计算出图像的尺寸 - 如果超过最大尺寸，则可以阻止该操作。

不确定是否值得，但您可以将图像的尺寸传回给客户端，如果计算出的浏览器窗口的宽度/高度小于图像，请替换带有图像来源的 img 标签的固定容器。然后使用 css 将宽度/高度设置为与浏览器窗口按比例自动调整。如果你想要一个例子，我会把一些快速的代码扔进垃圾箱。

不完全确定你的意思 - 但这里就像凌晨 4 点！我一直试图为这个解决方案改变它，但不幸的是我无法在它周围出现边框......应该首先意识到这一点......！我想我可以坚持使用我现在拥有的解决方案 - 或者切换到 jQuery（使用淡入或滑下效果看起来有点酷）。我想 jQuery 可以实现比纯 CSS / HTML 更好的效果......嗯，我稍后会解决这个问题 - 需要一些 kip.. 无论如何感谢您的尝试。

没问题。像你一样，我对通常提出的解决方案从来没有完全满意过。如果您有任何其他问题，请告诉我。

【参考方案2】：

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

【讨论】：

谢谢 - 我没有提到的是我有大约 6 年的 HTML / CSS 经验和 2 1/2 年的 VB.Net 经验，所以我相当有经验。我只是从来没有找到一种方法来做到这一点，并且有兴趣知道其他人是否有。我见过很多人试图做同样的事情，但他们都是没有解决方案的老线程。我稍后会发布我的标记，并做一个 jsfiddle。

事实上，如果您访问live.heritageartpapers.com/…，那么您将能够在我将示例代码放在一起时看到它的运行情况。

好的，我已经添加了 JSFiddle。您应该能够看到我正在尝试做什么 - 但显然 div 正在从其容器中获取 -50% 的边距，而不是它本身。我希望它使用它自己的宽度/高度。我知道这是不可能的，但必须有办法——这似乎是一件很简单的事情......

【参考方案3】：

使用 CSS 将 div 水平和垂直居中的最佳方法是通过 flex-box。

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

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

试试这个：

.image-enlargement 
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;


.image-enlargement img 
    margin: auto;

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://www.w3schools.com/cs-s-ref/css_units.asp & https://css-tricks.com/the-lengths-of-css/