Question

我在包含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的高度。

对此有什么干净的解决方案吗？

Answer 1

我能想到的最佳解决方案是父容器为display:table，图像包装为display:table-cell。

这是一个容器的简单示例，其尺寸与其所拥有的图像相同。

（容器带有虚线边框）

＆＃13;

* {
    -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;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

div.container {
    display:table;
}

＆＃13;

Answer 3

只需进行划分，不要给它的高度和，并将图像放在里面，除法将根据图像的尺寸自动取高度和宽度。

Answer 4

将display元素的.container属性设置为inline-block，而不是block。

保持包含div的图像大小

4 个答案: