在Div中居中超大图像
在Div中居中超大图像
提问于 2013-01-28 20:51:27
我一直在尝试解决如何仅使用css在div中居中显示超大图像。
我们使用的是流畅的布局，所以图像容器的宽度随着页面宽度的变化而变化( div的高度是固定的)。图像位于div中，带有一个内嵌的方框阴影，这样看起来就像你正在浏览页面中的图像一样。
图像本身的大小已调整为以其最大可能的值填充周围的div (设计具有max-width值)。
如果图像比周围的div小，这很容易做到：
margin-left: auto;
margin-right: auto;
display: block; 但当图像大于div时，它只是从左边缘开始，从中心向右偏移(我们使用overflow: hidden)。
我们可以分配一个width=100%，但是浏览器在调整图像大小方面做得很糟糕，网页设计的中心是高质量的图像。
关于将图像居中以便overflow:hidden均匀地剪切两个边缘有什么想法吗？
回答 11
Stack Overflow用户
发布于 2013-10-17 05:13:56
试试这样的东西。这应该使任何巨大的元素相对于其父元素在垂直和水平方向上居中，而不管它们的大小。
.parent {
position: relative;
overflow: hidden;
//optionally set height and width, it will depend on the rest of the styling used
}
.child {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}Stack Overflow用户
发布于 2013-01-28 20:54:34
在div中放一个大的div，居中，并在div中居中图像。
这会使其水平居中：
HTML：
<div class="imageContainer">
<div class="imageCenterer">
<img src="http://placekitten.com/200/200" />
</div>
</div>CSS：
.imageContainer {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.imageCenterer {
width: 1000px;
position: absolute;
left: 50%;
top: 0;
margin-left: -500px;
}
.imageCenterer img {
display: block;
margin: 0 auto;
}演示：http://jsfiddle.net/Guffa/L9BnL/
要将它垂直居中，您可以对内部div使用相同的设置，但您需要图像的高度才能将其绝对放置在其中。
Stack Overflow用户
发布于 2017-04-17 13:31:59
刚开始的时候，但是我发现这个方法是非常直观的。https://codepen.io/adamchenwei/pen/BRNxJr
CSS
.imageContainer {
border: 1px black solid;
width: 450px;
height: 200px;
overflow: hidden;
}
.imageHolder {
border: 1px red dotted;
height: 100%;
display:flex;
align-items: center;
}
.imageItself {
height: auto;
width: 100%;
align-self: center;
}HTML
<div class="imageContainer">
<div class="imageHolder">
<img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14562457
复制相关文章
相似问题