我想制作一个包含 img 的 div 的响应式背景图片: 像这样:
我正在使用 Bootstrap 。 这是 HTML:
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-10">
<div class="device-laptop">
<img src="img/test.jpg"/>
</div>
</div>
这是CSS:
device-laptop{
background: url('../img/macpro.jpg') no-repeat;
width: 363px;
height: 208px;
padding: 12px 45px 23px 43px;
background-size:100%;
}
.device-laptop img{
width: 274px;
height: 172px;
}
这是正常形式。现在我想让它响应,所以当背景图像改变时,里面的图像也会改变。有什么办法可以做到这一点吗?
我试过:
.device-laptop{
background: url('../img/macpro.jpg') no-repeat;
/*width: 363px;*/
background-size:100%;
height: 208px;
}
这使得背景图像具有响应性,但我怎样才能使图像与背景图像平行呢? 谢谢
最佳答案
编辑:奇怪,从提供的 CSS 来看,.device-laptop
似乎具有固定的宽度和高度。不确定它会如何流动?
无论如何,利用@papa提到的background-size:contain
选项
.. 如果您可以更改标记。下面将完成这项工作。
fiddle :http://jsfiddle.net/Varinder/wf3U8/1/
HTML
<div class="some-awesome-laptop">
<div class="some-awesome-wallpaper-wrapper">
<img src="http://placehold.it/250x150&text=text" class="some-awesome-wallpaper" />
</div>
</div>
CSS
.some-awesome-laptop {
background-image:url("http://placehold.it/270x180/aaa&text=a");
background-repeat:no-repeat;
width:270px;
max-width:100%;
margin:0 auto;
height:0;
overflow:hidden;
padding-bottom:66%; /* aspect ratio of the image: (180/270)*100 */
position:relative;
-webkit-background-size:contain;
-moz-background-size:contain;
background-size:contain;
}
.some-awesome-wallpaper-wrapper {
padding:10px;
}
.some-awesome-wallpaper {
max-width:100%;
display:block;
}
关于html - div 的响应式背景图像以及内部图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22001687/