html – 如果图像不是背景图像,如何使用CSS使图像响应?
发布时间:2020-12-14 23:26:46 所属栏目:资源 来源:网络整理
导读:我正在尝试使这个布局响应.我遇到的问题就像图像在前景上.我尝试过背景位置封面,但没有成功.我不应该为此使用任何 JavaScript 以下是小提琴链接 http://jsfiddle.net/6jhx7du6/ HTML: div class="page-wrap" h1Make This Responsive/h1 pWhile maintaining
我正在尝试使这个布局响应.我遇到的问题就像图像在前景上.我尝试过背景位置封面,但没有成功.我不应该为此使用任何
JavaScript
以下是小提琴链接 http://jsfiddle.net/6jhx7du6/ HTML: <div class="page-wrap"> <h1>Make This Responsive</h1> <p>While maintaining the heirarchy of importance.</p> <article class="main-story"> <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking" /> <div class="story-intro"> <h1>Most Important Story</h1> <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a> </p> </div> </article> <section class="sub-stories"> <article class="sub-story"> <img src="http://placekitten.com/250/350" /> <div class="story-intro"> <h2>Less Important Story</h2> <p>This story has less visual weight.</p> </div> </article> <article class="sub-story"> <img src="http://placecage.com/250/350" /> <div class="story-intro"> <h2>Less Important Story</h2> <p>This story has less visual weight.</p> </div> </article> <article class="sub-story last"> <img src="http://placebear.com/250/350" /> <div class="story-intro"> <h2>Less Important Story</h2> <p>This story has less visual weight.</p> </div> </article> </section> </div> CSS: * { box-sizing: border-box; } .page-wrap { width: auto; margin: 20px auto; } .main-story { position: relative; margin: 0 0 25px 0; } img { display: block; max-width: 100%; height: auto; } a { color: lightblue; } .story-intro { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0.75); padding: 20px; color: white; } h1 { font-size: 4em; } h1,h2 { margin: 0 0 10px 0; } .story-intro h1 { font-size: 2.5em; } .story-intro p { margin: 0; } .sub-stories { overflow: hidden; margin: 0 0 25px 0; } .sub-story { float: left; width: 250px; margin-right: 25px; position: relative; font-size: 80%; } .last { margin-right: 0; } 提前致谢.. 解决方法
现在定义你的类.main-story img
这种风格 .main-story > img{ width:100%; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容