Question

我正在处理的页面有一个响应式视图。

产品列在页面上，产品列表按页面宽度进行缩放。

我想将产品图像放在容器的中心，以便图像占据容器的宽度和大小，并始终以图像中心为中心位于.product

的中心

<div class='product'>
  <div class="image_wrapper">
    <a href="/products/1">
      <img scr="http://awesome.image.com/1.jpg">
    </a>
  </div>
</div>

由于页面是响应式的，因此内容宽度和高度是可变的

有人可以提供建议吗？

更新

我创造了这个小提琴来更好地解释这个问题：随着屏幕尺寸变小，图像应保持在中心位置，塔保持居中。如果图像宽于容器

，边缘上的黑色阴影应该会滑出视图

http://jsfiddle.net/gavinmorrice/aUL29/

Answer 1

这是解决方案我的朋友:)

.product {
    width: auto;
    margin: auto;
}
#image_wrapper {
    width: 100%;
    display: table;
    background-image:url("http://drinkdeals-1-asia.s3.amazonaws.com/development/venues/9a6f8955a3ab7670217425cb50c171ea/wide_venue.jpg");
    height:300px;
    background-position:center; 
    background-repeat:no-repeat;
}

将CSS更改为上面的内容，然后从HTML和CSS中删除图像标记:)

Answer 2

你尝试过使用

吗？

.image_wrapper img{
min-width:100%;
}

希望有所帮助

Answer 3

以下是示例：http：//jsfiddle.net/9X6zD/2/`"＆gt; http：//jsfiddle.net/9X6zD/2/

父母必须有位置：亲属和元素边距：auto;并显示：block;

顺便说一句。如何把链接放在小提琴上？有人可以编辑吗？

Answer 4

你image_wrapper div必须按如下方式获取css：

.image-wrapper {
    display: table;
    width: 100%;
}

img元素必须得到以下代码，它将在中间完整呈现

img {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

同样在这个Blogpost中，您可以找到有关水平和垂直居中元素的更多信息。

如何将此图像水平放置在其动态父级的中心

更新

4 个答案: