我的目标是使图像在其容器内垂直和水平居中,并且图像在不改变原始宽高比的情况下占据尽可能多的空间。
使用{背景大小:包含;背景位置:中心;背景重复:norepeat; } 不是一个选项,因为我需要将覆盖 div 附加到图像的一 Angular 。使用背景意味着包含的 div 不会精确地遵循图像大小。
下面是使用 flexbox 的尝试。不幸的是,它在 Firefox 中不起作用(至少在 Linux 上)。当容器的宽度大于给定高度的图像宽度时,Firefox 会拉伸(stretch)图像。 Flexbox attempt
这是另一种尝试,这次使用绝对定位 w/left: 50%;为了使第一个 div 居中并转换:translate(-50%, -50%) 为了使图像居中。结果是 Not Acceptable ,因为 image-wrapper div(带有绿色“olivedrab”边框)在 Firefox 上不在图像周围(垂直调整窗口大小时在 chrome 中也是如此)。这意味着不能将叠加层直接附加到图像上(并在调整大小时跟随)。 Left 50% + Translate attempt
注意:不需要 Javascript。
最佳答案
<style>
div {
width: 400px;
height: 400px;
line-height: 400px;
background-color: #cccccc;
vertical-align: middle;
position: relative;
border: 1px solid black;
}
img {
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
vertical-align: middle;
width: auto;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
在 IE9 和 FF 中测试。
关于html - 如何在不使用背景的情况下使用 HTML 和 CSS3 创建响应式、垂直和水平居中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26045002/