我希望有一个图像填充div而不是溢出,并且像这个bootply一样是50%的屏幕关闭。我有它在bootply中显示我想要它的方式,但我希望有一个更动态的方法来做更少的代码。
答案 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>
这是小提琴链接: