HTML＆amp; CSS：垂直或水平缩放图像

Question

我的div总是400px乘400px。我想在其中放置不同大小的图像，这些图像将始终缩放以适合此方式，从而在垂直或水平方向留下空白区域。

例如，如果我们有一个横向（宽图像），它将需要400px宽度，缩放高度和垂直居中。

如果我们有一个肖像（一个高大的图像），它将需要400px高度，缩放宽度和水平居中。

无法找出使用CSS的任何解决方案，但希望我忽略了一些东西。

Answer 1

如果您能够将此图片作为容器背景，则可以使用以下CSS规则：

background-size: cover;
background-position: center; // for centring background within container

FIDDLE

Answer 2

尝试设置您的容器：

container {
height:400px;
width:400px;
line-height:400px;
text-align:center;
}

和图像

img {
max-height:100%;
max-width:100%;
vertical-align:middle;
}

Answer 3

@Donny P：

尝试将图片应用于图片，例如：

.img-responsive {
    max-width: 100%;
    height: auto;
}

这就是Bootstrap makes images responsive的方式，因此它们适合父容器。

Answer 4

的 Demo

HTML

<div class=frame>
    <span class="helper"></span><img src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png"  />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://www.vertical-corp.com/assets/images/vertical_logo.jpg" />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://joeworkman.net/rapidweaver/stacks/cooliris/index_files/stacks_image_12796.png"  />
</div>

CSS

.frame {
    height:400px;      /* equals max image height */
    width: 400px;
    border: 1px solid red;

    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background : rgba(0,0,0,0.4);
    vertical-align: middle;
    max-height: 400px;
    max-width: 400px;
}