Question

我在主要div中有一个三个div块，即head，content和footer 我面临的问题很少：
（1）图像不在div内部意味着我试图找到这种情况的代码：

<div style="height:10%">
  <img src="abc.jpg" height="100%">
</div>

和
（2）我有一个高度为80%的div，在这个div中我放了三个div他们的高度是20%, 60%, 20%。高度为60%的div没有数据我写它为保证金。（表示第一个div 20% height有一个数据，然后是60% height for space，然后是另一个有数据的div，那么如何实现呢？

（如果可能，请不要使用margin-up or bottom

进行建议

HTML code:

<div class="homebackground" style="height:100%; width:100%; background-image:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%">

<div class="bodyhead">
  <img src="../../stylesheets/images/user_male.png"/>
</div>

<div style="height:80%">

  <div style="width:100%">
     <div class="mainbodyup" align="right">
       <img src="../../stylesheets/images/phone.png"/>
     </div>
     <div class="mainbodyup">&nbsp;</div>
     <div class="mainbodyup">
        <img src="../../stylesheets/images/groupchat.png"/>
     </div>
  </div>

  <div style="height:60%; clear:both;" class="a">
    <div class="mainbodymid"></div>
    <div class="mainbodymid"></div>
    <div class="mainbodymid"></div>
  </div>

  <div style="width:100%">
     <div class="mainbodybot" align="right">
       <img src="../../stylesheets/images/recent.png"/>
     </div>
     <div class="mainbodybot">&nbsp;</div>
     <div class="mainbodybot">
        <img src="../../stylesheets/images/search.png"/>
     </div>
  </div>

</div> 

<div style="height:10%;">
</div>

</div>

CSS:

.bodyhead
{
    height:10%;
}
.bodyhead img
{
  width: 10%;
}
.mainbodyup
{
    height:20%;
    width:33%; 
    float:left;
}
.mainbodyup img
{
  width: 20%;
}
.mainbodymid
{
    width:33%; float:left; padding:0px;
}
.mainbodybot
{
    height:20%;
    width:33%; 
    float:left;
}
.mainbodybot img
{
  width: 20%;
}
.a:before
{
    display: table;
    content: " ";
}
.a:after
{
    clear:both;
    display: table;
    content: " ";
}

Answer 1

如果您想将整个图像放入div中。尝试使用

style="background:url('image-url') no-repeat; background-size: 100%;"

表示包含图片的div。而是使用图像对象。

Answer 2

style="background:url('image-url') no-repeat; background-size: contain;"

使用此代码。

Answer 3

将一个css添加到现有样式表

html, body{
     height: 100%;
}

适合div内的图像

3 个答案: