如何根據所包含的div的大小設置背景圖像的大小？

Question

我想讓一個圖像填充一個div但不會溢出，並且也要像此bootply那樣在屏幕外顯示50％。 我讓它在啟動時顯示了我想要的方式，但是我希望有一種更動態的方式來使用更少的代碼來執行此操作。

自舉

Answer 1

我想到了。 我只需要

background-position: top right; background-size: contain;

而不是內容div的所有其他代碼，然后我只是在photoshop中裁剪了圖像，因此不需要更改水平位置。

Answer 2

我猜想最簡單的方法是使用CSS3 FlexBox屬性。 請參閱下面的代碼和小提琴鏈接：

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：

.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;
}

這是Fiddle鏈接：

https://jsfiddle.net/smlrolland/rqu2a0g0/4/