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,inherit和min-with,但没有任何工程!
有人能帮助我吗?
PS:我需要一个响应式解决方案.
谢谢
从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%如果图像响应,特定阈值将始终是图像的宽度.
| 归档时间: |
|
| 查看次数: |
5589 次 |
| 最近记录: |