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

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