Question

我想将图片集中到网站中心。当窗口调整大小时我想要重新调整大小，而不是调整大小，应该通过浏览器窗口左右裁剪，使图像中心位于图像的垂直中心。

<div class="image-container">
    <img src=imgpath/image.jpg">
</div>

我试过了：

.image-container img{
   width: 100%;
   min-width: 1440 !important;
   margin: 64px auto 0 auto;
   height: auto;
   min-height: 400px !important;
}

img {
   vertical-align: middle;
}

有任何想法如何做到这一点。如果不是jq，我会优先选择CSS。

Answer 1

您可以使用display:table-cell将内部图像与div的中间对齐。

但是在这种情况下你不能给予保证金，因为table-cell强制div作为td，从技术上来说你不能给表td留有余量。

所以我添加了白色div的边框。

.image-container{
  background: #C8BFE7;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
  border:white 5px solid
}

演示：http://jsfiddle.net/Arav8/3/

页面中心的图像 - 可调整大小

1 个答案: