2

我一直在尝试将宽<img>元素水平居中在 a<div>中,该元素不如图像本身宽。并且<div>已经overflow: hidden开始了。

例如,图像很500px宽,DIV 很250px宽。是否有任何干净的方法(例如它适用于任何尺寸的图像)使图像居中,以便只有中心部分显示在 div 内。

4

3 回答 3

2
<div class="Container">
    <img class="Thumb">
</div>

和 :

.Container {
    position: /* anything but static */
    width: 250px;
}

.Thumb {
    position: relative;
    width: 500px;
    margin: 0 auto;
}
于 2013-07-29T12:39:38.217 回答
0

由于您期望响应行为,我建议您拥有(对于一个简单的行为)

div {
 text-align: center;
}

但是使用CSS3 和媒体查询是可能的。

查看如何在 CSS3 中创建响应式居中图像

快速演示

于 2013-07-29T14:56:33.270 回答
0

您可以使用 css 将图像添加为背景,并将背景位置设置为中心。

于 2013-07-29T14:39:04.983 回答