Question

我希望有一个图像填充div而不是溢出，并且像这个bootply一样是50％的屏幕关闭。我有它在bootply中显示我想要它的方式，但我希望有一个更动态的方法来做更少的代码。

Bootply

Answer 1

我明白了。我需要的只是

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

而不是我为内容div所有的其他代码，然后我只是在photoshop中裁剪我的图像，所以我不需要改变水平位置。

Answer 2

我想最简单的方法是使用CSS3 FlexBox属性。请参阅下面的代码和小提琴链接：

<强> HTML：

import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline

percent=float(raw_input('on percentage:'))
TimePeriod=float(raw_input('time period:'))
Cycles=int(raw_input('number of cycles:'))
dt=0.01  # 0.01 appears to be your time resolution

x=np.arange(0,Cycles*TimePeriod,dt);  #linspace's third argument is number of samples, not step

y=np.zeros_like(x)   # makes array of zeros of the same length as x
npts=TimePeriod/dt

i=0
while i*dt< Cycles*TimePeriod:
    if (i % npts)/npts < percent/100.0:
        y[i]=1
    i=i+1

plt.plot(x,y,'.-')
plt.ylim([-.1,1.1])

CSS：

<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>

这是小提琴链接：

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

如何根据包含div的大小设置背景图像的大小？

2 个答案: