Question

我有各种不同尺寸（更大，更小等）的不同图像。我想要的是在保持图像宽高比的同时，将这些图像拉伸并居中于已知尺寸的容器中。

那是：

如果图像较大，则应调整大小以适应容器的大小及其给定的宽高比并居中。
如果图像较小，它们应该保持原样并且在容器的大小中居中

有什么想法吗？

Answer 1

在max-width元素上使用CSS img，现场演示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;
}

这使图像保持正确的比例，但不允许它们比contianer大，并且使较小的图像居中：请参阅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

的SO question启发

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

3 个答案: