我一直在尝试解决如何仅使用css在div中居中显示超大图像。
我们使用的是流畅的布局,所以图像容器的宽度随着页面宽度的变化而变化( div的高度是固定的)。图像位于div中,带有一个内嵌的方框阴影,这样看起来就像你正在浏览页面中的图像一样。
图像本身的大小已调整为以其最大可能的值填充周围的div (设计具有max-width
值)。
如果图像比周围的div小,这很容易做到:
margin-left: auto;
margin-right: auto;
display: block;
但当图像大于div时,它只是从左边缘开始,从中心向右偏移(我们使用overflow: hidden
)。
我们可以分配一个width=100%
,但是浏览器在调整图像大小方面做得很糟糕,网页设计的中心是高质量的图像。
关于将图像居中以便overflow:hidden
均匀地剪切两个边缘有什么想法吗?
发布于 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;
}
发布于 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使用相同的设置,但您需要图像的高度才能将其绝对放置在其中。
发布于 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>
https://stackoverflow.com/questions/14562457
复制相似问题