根据图像宽度划分Div

mpl*_*dro 2 css inheritance image responsive-design

我有一个投资组合页面,带有缩放图像显示.我有这个代码:http://codepen.io/Mpleandro/pen/LvrqJ

显示图像的div有一个类.display,在HTML的第13行和这个div isline 90的css格式.

图像宽度将是灵活的,所以我想要的是使包含div继承图像的宽度.

我试过CSS属性auto,inheritmin-with,但没有任何工程!

有人能帮助我吗?

PS:我需要一个响应式解决方案.

谢谢

kni*_*ion 7

从1年过去了,你可能对解决方案不感兴趣,但希望能帮到别人.

我也有这样的情况,我需要一个div与图像宽度相同,这必须是响应.

就我而言,我为div设置了固定的宽度

.some-div{
   width: 250px;
}
Run Code Online (Sandbox Code Playgroud)

我也有响应图像:

img{
   display: block;
   max-width: 100%;
   height; auto;
}
Run Code Online (Sandbox Code Playgroud)

然后我添加了一个带阈值的媒体查询,当div启动的固定宽度影响响应性质时,只需添加以下内容:

@media screen and (max-width: 917px){
    .some-div{
        width: 100%;
    }
}
Run Code Online (Sandbox Code Playgroud)

对于我的项目,阈值是917px固定宽度开始影响的时间.

我想这是一个适合所有人的解决方案,因为width: 100%如果图像响应,特定阈值将始终是图像的宽度.