Question

我试图将我的网页划分为四个相等的部分。我在网上发现了一些提示如下的提示：

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
}

div {
    width: 50%;
    height: 50%;
    float: left;
}

问题是当我这样做时，我想要摆脱每张照片右侧的黑色空间。我试图摆脱左边的浮动但是页面不再分成4个部分了。我怎么才能得到它所以每个带有图片的div都完全填满了图片？

＆＃13;

body {
	background-color: black;

}
.next {
	color: #995c00;
	vertical-align: center;
}

h1 {
	color: #995c00;
	font-family: Garamond  ;
	font-size: 50px;
	text-align: center;
    display:table-cell;
    vertical-align:middle;
}
 h2 {
	color: #995c00;
	font-family: Garamond;
}
ul {
	color: #995c00;
	font-family: Garamond;
}

/*body {
  position: fixed;
  top: 35%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}*/
.result-section{
	color: #995c00;
	font-family: Garamond  ;
}
html, body { height: 100%; min-height:100%; padding: 0; margin: 0; }

#div1 {width:50%; 
        height:50%;
        float:left;
        position:relative;
        
        
        }

#div2 { background-image: url(pictures/drums.jpg); 
		background-repeat:no-repeat;
        background-size:contain;
        width:50%; 
        height:50%;
         float:left;
         position:relative;
         

        
        
    }

#div3 { background-image: url(pictures/keyboard.jpg); 
		background-repeat:no-repeat;
        background-size:contain;
        width:50%; 
        height:50%;
        float:left;
        position:relative;
        
         
        
       }

#div4 { background-image: url(pictures/mixer_2.jpg); 
		background-repeat:no-repeat;
        background-size:contain;
        width:50%; 
        height:50%;
       float:left;
        position:relative;
       
         
   }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <TITLE>2016 Grammy Quiz</TITLE>
  <meta charset="utf-8"/>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="div1">
   <div id = 'container'>
   <h1> 2016 Grammy Quiz</h1> 

        <h2 id='questionTitle'> </h2>
        <ul id ='selectionList'> </ul>

        
        <button type="button" class = 'next'> Next </button>
      
    <section class="result-section" style="display: none;">
        <h2 class="text"> Final Score </h2>
        <h3 class="text" id="finalScore">10/10</h3>
        <div id="result_msg"></div>
        <button class="start-button" id="tryagain">Try Again</button>
    </section>
    </div>
</div>
<div id="div2">
</div>
<div id="div3"> 
</div>
<div id="div4">
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

＆＃13;

Answer 1

你想要完成这样的事吗？

https://jsfiddle.net/49gg12nr/2/

background-size:100% 100%;

似乎是你缺少的东西

修改：更新了链接

Edit2：更新了链接（再次），删除了旧的 background-size：contains; 阅读包含和 100％100％之间的差异可能会有所帮助。从下面的链接中，您可以看到包含就是这样，它使图像将包含在容器中，但它保持比例相同。 100％100％会导致图像填满容器，但会忽略比例。除非您将容器设置为一致的比例，否则您不能同时拥有这两者。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

需要帮助摆脱空间CSS

1 个答案: