保留一個包含div的圖像大小

我有一個包含div內的方形圖像，並希望包含div具有與圖像相同的尺寸。圖像的大小各不相同，因此未預先知道。特別要注意的是，圖像是div內唯一的東西（好吧，不是嚴格意義上的，但其他元素是絕對定位的，因此基本上可以忽略）。保留一個包含div的圖像大小

我目前擁有的代碼如下：

div.container, image { 
    display: block; 

    /* ensure enough room for other content in sidebar */ 
    max-height: calc((100vh - 12em)/2); 

    /* don't allow image to escape sidebar boundaries */ 
    max-width: 256px; 

    /* forces image to be square as it's originally square */ 
    width: auto; 
    height: auto; 
} 

div.container { 
    position: relative; 
    margin: 1em auto; 
}

我已經看到了有關使用padding-bottom一些帖子;雖然這確實使得包含的div爲正方形，但它不一定與圖像的大小相同，因爲圖像的高度可能會被迫遠小於div的高度。

有沒有乾淨的解決方案呢？

來源

2016-05-01 Samuel Front

你試過jQuery嗎？ –

我寧願不使用Javascript，除非在CSS中沒有辦法做到這一點。 –

我認爲你不能使用display：inline-block或浮動它嗎？ – wizzardmr42

將.container元素的display屬性設置爲inline-block而不是block。

來源

2016-05-01 09:43:37 Shaggy

我能想到的最佳解決方案是父容器的display:table和圖像包裝器的display:table-cell。

下面是一個容器的簡單示例，它具有與所容納圖像相同的尺寸。

（該容器是用虛線邊框）

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding: 10px; 
 
} 
 

 
img { 
 
    height: auto; 
 
    vertical-align:top; 
 
} 
 
section{ 
 
    display:table; 
 
} 
 
.image{ 
 
    display:table-cell; 
 
    vertical-align:top; 
 
    outline:5px dotted red; 
 
}

<section> 
 
    
 
    <article class="image"> 
 
     <img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" width="240" height="240" alt=""> 
 
    </article> 
 
    </section>

來源

2016-05-01 07:04:55 dimshik

div.container { 
 
    display:table; 
 
}

來源

2016-05-01 07:12:48

它是做什麼的？它有什麼幫助？你爲什麼不編輯你的代碼片段更明顯？ – dakab

只是要分裂和不給其高度和着，並把裏面的圖像，分區會自動根據高度和寬度圖像的尺寸。

來源

2016-05-01 07:41:21 Siraj

保留一個包含div的圖像大小

回答

相關問題