未知尺寸的拉伸和中心图像

Question

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

即：

• 如果图像是更大的，他们应该得到调整到容器的尺寸范围内适合与他们给出的长宽比和居中。

• 如果图像是较小的，他们应该简单地保持原来的样子，并正在容器的大小

任何想法中居中？在img元素

Answer 1

使用此代码示例：

<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大，和中心小图片：用于现场演示

Answer 2

使用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 3

见 this fiddle

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

负边距可能允许图像比边框更宽。

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

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