使全宽图像居中在div [英] Make full width image centered in div

问题描述

我有一个div容器，最大高度为400像素。我把一个很大的图像在容器内。由于容器有一个最大高度，它显然切断了大部分的图片，这是我的目标。但我唯一的问题是试图让图像居中的div，所以图片的主要部分显示。

I got a div container that has a max height of 400 pixels. I'm placing a pretty large image inside the container. Since the container has a max height it's obviously cutting off most of the picture, which is what I'm aiming for. But my only issue is trying to get the image to center inside the div, so the main part of the picture is shown.

这是我目前的代码： / p>

Here is the code I have currently:

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

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

推荐答案

尝试使用：

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

这篇关于使全宽图像居中在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！