拉伸和居中未知大小的图像

Question

我有各种未知尺寸（大、小等）的不同图像。我想要的是在保持图像纵横比不变的情况下，将这些图像拉伸并居中放置在已知大小的容器中。

即：

如果图像较大，则应根据给定的纵横比调整图像大小以适应容器大小并居中。
如果图像较小，它们应该保持原样并在容器大小内居中

有什么想法吗？

Answer 1

在 img 元素上使用 CSS max-width，现场演示 http://jsfiddle.net/exaxq5ho/

HTML

<div class="container">
  <img src="http://www.placehold.it/600x100"/>
  <img src="http://www.placehold.it/300x100"/>
  <img src="http://www.placehold.it/100x100"/>
</div>

CSS

.container {
    width: 300px;
    text-align: center;
}

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

Answer 2

以这段代码为例：

<div class="imagecontainer">
    <span class="imghelper"></span>
    <img src="http://www.placehold.it/30x30"/>
</div>
<div class="imagecontainer">
    <span class="imghelper"></span>
    <img src="http://www.placehold.it/300x300"/>
</div>
<div class="imagecontainer">
    <span class="imghelper"></span>
    <img src="http://www.placehold.it/50x150"/>
</div>

像这样使用css：

.imagecontainer{
    width:150px;
    height:100px;
    border:1px solid #cccccc;
    background-color:#656565;
    text-align:center;
}
.imghelper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.imagecontainer img{
    max-height:100%;
    max-width:100%;
    display:inline;
    vertical-align:middle;
}

这可以使图像保持正确的比例，但不允许它们比容器大，并使较小的图像居中：查看 this fiddle 观看现场演示

Answer 3

已知高度的容器可以看到应用于垂直居中内联框的行高。最大高度和最大宽度（如果宽度也已知）也可用于缩小图像。

负边距可能会使图像变得比方框更宽。

可以允许容器看到宽度增长。这里有几个例子：

picture.knownheight {
  height:100px;
  width:100px;
  line-height:96px;
  box-shadow:0 0 0 3px;
  text-align:center;
  display:inline-block;
  margin:0 1em;;
  overflow:hidden;
}
picture.knownheight.auto {
  width:auto;
  min-width:100px;
}
picture.knownheight.maxW img {
  max-width:100%;
}
picture.knownheight.minH img {
  min-height:100%;
}

picture.knownheight img {
  vertical-align:middle;
  max-height:100%;
  margin:0 -100%;/* keeps img at center and clip them*/
}

<h1>max-height, max-width, center </h1>
<picture class="knownheight maxW">
  <img src="http://lorempixel.com/100/150"/>
</picture>
<picture class="knownheight maxW">
  <img src="http://lorempixel.com/200/150"/>
</picture>
<picture class="knownheight maxW">
  <img src="http://lorempixel.com/150/150"/>
</picture>
<picture class="knownheight maxW">
  <img src="http://lorempixel.com/800/450"/>
</picture>
<picture class="knownheight maxW">
  <img src="http://lorempixel.com/300/340"/>
</picture>
<h1>max-height, center, clip sides </h1>
<picture class="knownheight">
  <img src="http://lorempixel.com/100/150"/>
</picture>
<picture class="knownheight">
  <img src="http://lorempixel.com/200/150"/>
</picture>
<picture class="knownheight">
  <img src="http://lorempixel.com/150/150"/>
</picture>
<picture class="knownheight">
  <img src="http://lorempixel.com/800/450"/>
</picture>
<picture class="knownheight">
  <img src="http://lorempixel.com/300/340"/>
</picture>
<h1>max-height, min-height to stretch , center & clip sides </h1>
<picture class="knownheight minH ">
  <img src="http://lorempixel.com/100/150"/>
</picture>
<picture class="knownheight minH ">
  <img src="http://lorempixel.com/200/150"/>
</picture>
<picture class="knownheight minH ">
  <img src="http://lorempixel.com/150/150"/>
</picture>
<picture class="knownheight minH ">
  <img src="http://lorempixel.com/800/450"/>
</picture>
<picture class="knownheight minH ">
  <img src="http://lorempixel.com/300/340"/>
</picture>
<h1>max-height, min-height to stretch container. center img </h1>
<picture class="knownheight minH auto">
  <img src="http://lorempixel.com/100/150"/>
</picture>
<picture class="knownheight minH auto">
  <img src="http://lorempixel.com/200/150"/>
</picture>
<picture class="knownheight minH auto">
  <img src="http://lorempixel.com/150/150"/>
</picture>
<picture class="knownheight minH auto">
  <img src="http://lorempixel.com/800/450"/>
</picture>
<picture class="knownheight minH auto">
  <img src="http://lorempixel.com/300/340"/>
</picture>

灵感来自 Clipping image in center without clip CSS from this SO question

拉伸和居中未知大小的图像

Stretch and center image of unknown size

html

css

image