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

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

你的image_wrapperdiv必须得到css如下:

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

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

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

在这篇博文中，你还可以找到更多关于元素水平和垂直居中的信息。

Answer 4

示例:[http://jsfiddle.net/9X6zD/2/][x]

父元素必须有position:relative和element margin:auto;

(演示)[1]