如何在圖像中包裝一個容器

Question

所以我有一個班，讓我們打電話cont，它將包含很多東西，包括圖像。

現在我想要設計圖像的樣式。我們可以使用樣式一個div內的圖像與.cont：

.cont>img { 
    ... 
} 

然而，在我cont格，我想另一個盒子佔據150像素* 150像素，在圖像是「內部」。爲了澄清，我想有一個150像素* 150像素框時，認爲可能是小的圖像：

[   ] 
    [ [ ] ] 
    [ [img] ] 
    [ [ ] ] 
    [   ] 

基本上，在共同的CSS，這是可以做到像這樣：

.cont-image { 
    width:150px; 
    height:150px; 
} 

但這具有將cont-image類添加到每個圖像的缺點。

這是可能被自動繼承和設計？™？不知怎的，我愛：

.cont>img { 
    width:150px; 
    height:150px; 
} 

（顯然，上述方法無效，因爲它延伸的圖像尺寸，而不是有「包裝」容器

基本上，我想有一個形象有。它被投進了預設的尺寸，這能夠像這樣做：

<div style="width:150px;height:150px"> 
    <img src=""></img> 
    </div> 

所以我有一個div是150 * 150，並與可變大小的圖像是它的內部。然而，我。希望通過僅對圖像本身進行造型來完成此操作（沒有外部div）：

<img style="???" src=""></img> 

Answer 1

您是否嘗試更改爲最大寬度/高度？

.cont>img { 
    max-width:150px; 
    max-height:150px; 
} 

將不會有圖像拉伸。

Answer 2

HTML：

<div class="cont"> 
    <div> 
     <img src="http://www.famfamfam.com/lab/icons/silk/icons/application_form.png" /> 
    </div> 
</div> 

CSS：

.cont { 
    width: 150px; 
    height: 150px; 
    background-color: green; 
    padding: 25px; 
} 

.cont > div { 
    width: inherit; 
    height: inherit; 
    background-color: grey; 
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
} 

.cont img { 
    max-width: 150px; 
    max-height: 150px; 
} 

如果我理解正確的話，這應該爲你工作。

Answer 3

你是否想找這樣的產品：http://jsfiddle.net/abhitalks/pULZA/1/？

使用相同的標記：

<div class="cont"> 
    <img src="http://lorempixel.com/50/50" /> 
</div> 

嘗試在撥弄改變圖像的大小。嘗試製作http://lorempixel.com/350/350。希望適合你在內部容器中限制圖像大小的目的。

現在的CSS：

使用:after僞類來生成人造容器。它實際上不是一個容器，但看起來像一個。這將幫助你不改變你現有的標記。

.cont { 
    border: 1px solid gray; 
    width: 250px; height: 250px; 
    line-height: 250px; 
    position: relative; 
    text-align: center; 
} 

.cont > img { 
    border: 1px solid black; 
    display: inline-block; 
    max-width: 150px; max-height: 150px; 
    vertical-align: middle; 
    text-align: center; 
} 
.cont:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 50px; left: 50px; 
    width: 150px; height: 150px; 
    border: 1px solid red; 
    background-color: #ddd; 
    z-index: -10; 
} 

使z-index爲負值使其位於圖像後面，從而顯示爲容器。

否則，唯一的選擇是將標記更改爲具有嵌套的div。

更新：

檢查：http://jsfiddle.net/abhitalks/pULZA/2/

正如你所說，你想對容器進行固定爲150像素，你可以使用這個數字（960x75像素）的一半calc下並相應地定位內容:after。因此，即使尺寸改變，圖像及其框架也將始終保持居中。

使用CSS calc：

.cont:after { 
    ... 
    /* to calculate center, 
     we halve the width to 75px and subtract it from 50% of parent 
    */ 
    top: calc(50% - 75px); left: calc(50% - 75px); 
    width: 150px; height: 150px; 
    ... 
}