[英]How to set the size of a background image according to the size of the containing div?
I want to have an image fill a div but not overflow and also be 50% off screen like in this bootply. 我想让一个图像填充一个div但不会溢出,并且也要像此bootply那样在屏幕外显示50%。 I have it displaying the way I want it to in the bootply but I was hoping there is a more dynamic way to do this with less code. 我让它在启动时显示了我想要的方式,但是我希望有一种更动态的方式来使用更少的代码来执行此操作。
I figured it out. 我想到了。 all I needed was 我只需要
background-position: top right; background-size: contain;
instead of all of the other code I had for the content div, and then I just cropped my image in photoshop so I wouldn't need to change the horizontal position. 而不是内容div的所有其他代码,然后我只是在photoshop中裁剪了图像,因此不需要更改水平位置。
I guess the easiest way of doing this is using the CSS3 FlexBox property. 我猜想最简单的方法是使用CSS3 FlexBox属性。 See code and fiddle link below : 请参阅下面的代码和小提琴链接:
HTML: HTML:
<link rel="stylesheet" type="text/css" href="style.css" />
<div class="container">
<div class="div2">
<p>Sed ut perspiciatis unde omnis iste natus error sit <br>
accusantium doloremque laudantium, <br>
totam rem aperiam, eaque ipsa quae
</p>
</div>
<div class="inner-container">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<div class="img-container">
</div>
</div>
<div class="div2">
<p>Sed ut perspiciatis unde omnis iste natus error sit <br>
accusantium doloremque laudantium, <br>
totam rem aperiam, eaque ipsa quae</p>
</div>
</div>
CSS : CSS:
.div2 {background: #777;}
.container{
display:flex;
flex-direction:column;
}
.inner-container{
display:flex;
}
ul{
min-width:50%;
}
.img-container{
width: 50%;
background-image: url('http://image.shutterstock.com/z/stock-photo-lion-head-this-animal-is-considered-to-be-the-king-of-animals-and-white-albino-lion-is-endangered-74806333.jpg');
background-size:cover;
}
And here is the Fiddle link : 这是Fiddle链接:
https://jsfiddle.net/smlrolland/rqu2a0g0/4/ https://jsfiddle.net/smlrolland/rqu2a0g0/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.