使全宽图像以 div 为中心答案

【问题标题】：Make full width image centered in div使全宽图像以 div 为中心
【发布时间】：2014-03-18 14:30:29
【问题描述】：

我有一个最大高度为 400 像素的 div 容器。我在容器内放置了一个非常大的图像。由于容器有一个最大高度，它显然会切断大部分图片，这就是我的目标。但我唯一的问题是试图让图像在 div 内居中，因此显示了图片的主要部分。

这是我目前拥有的代码：

<div class="headerimg">
<img src="www.jpg.com"/>
</div>

.headerimg { max-height: 400px; overflow: hidden; }
.header img { width: 100%; height: auto; }

【问题讨论】：

发布您的代码并展示您的尝试。
水平居中还是垂直居中？（或两者）？
或者 JSFiddle 会很有用。
试试这个方法jsfiddle.net/Morlock0821/prdBb/1
@drew_w 我认为我们可以假设是垂直的，因为全角图像按定义居中

标签： javascript jquery html css

【解决方案1】：

简单使用 : text-align:center

live example is here >>>>

div{
  max-height:400px;
  border:1px solid red;    
  text-align:center;
}
div img{
  height:500px;
  width:200px;
}

【讨论】：

发生了什么你看到 jsfiddle 页面了吗？

【解决方案2】：

尝试使用：

div.container {
    margin: 0 auto;
    width: 900px;
}
div.container img {
    max-height:400px;
}

【讨论】：