html – 使响应式图像适合父容器
发布时间:2020-12-14 18:27:17 所属栏目:资源 来源:网络整理
导读:我一直试图弄清楚是否有一个纯CSS解决方案,以确保我的横幅内的图像不低于父级的高度,但保持图像的比例. 你可以在这里看到一个演示:http://jsfiddle.net/LkxYU/1/ HTML: div class="banner_holder" img src="http://placekitten.com/g/800/600"/ /div CSS:
我一直试图弄清楚是否有一个纯CSS解决方案,以确保我的横幅内的图像不低于父级的高度,但保持图像的比例.
你可以在这里看到一个演示:http://jsfiddle.net/LkxYU/1/ HTML: <div class="banner_holder"> <img src="http://placekitten.com/g/800/600"/> </div> CSS: .banner_holder{ width: 100%; height: 300px; min-height: 200px; position: relative; outline:1px dotted red; } .banner_holder img{ width: 100%; } 我的目标是使图像始终为100%,但高度从不低于300px.这意味着图像截止,但没关系,我只是想知道是否有纯CSS解决方案,或者我是否需要使用jQuery 解决方法
而不是使用< img>标签,我将该图像作为div的背景图像,并给它以下样式:
.banner_holderImage{ height: 100%; position:relative; background: url("http://placekitten.com/g/800/600")no-repeat; background-size: cover; background-position: center; } 这是我使用的小提琴:http://jsfiddle.net/MathiasaurusRex/LkxYU/4/ 这是完整的HTML和CSS: <div class="banner_holder"> <div class="banner_holderImage"></div> </div> – .banner_holder{ width: 100%; height: 300px; min-height: 200px; position: relative; outline:1px dotted red; } .banner_holderImage{ height: 100%; position:relative; background: url("http://placekitten.com/g/800/600")no-repeat; background-size: cover; background-position: center; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |