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

时间:2016-04-19 19:43:00

标签: html image twitter-bootstrap css3

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

Bootply

2 个答案:

答案 0 :(得分:1)

我明白了。我需要的只是

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

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

答案 1 :(得分:0)

我想最简单的方法是使用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/