为什么这个div不应用它的高度和宽度属性？

Question

我有一些图像，每个图像都在父div中。

当我尝试设置父div的宽度和高度时，它不会改变大小。为什么？我该如何设置它的大小？

Codepen以下内容：

＆＃13;

＆＃13;

.SNSicon {
  width: 600px;
  height: 600px;
  display: inline;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  background-color: red;
}
.SNSicon img {
  display: inline;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
  background-color: rgba(242, 99, 34, 1);
  color: #F2F2F2;
  border-color: black;
  opacity: .9;
}

＆＃13;

<div class="SNScontainer">
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/facebook.svg" />
  </div>
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/pinterest.svg" />
  </div>
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/instagram.svg" />
  </div>
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/twitter.svg" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以： CodePen

.SNSicon {
  width: 600px;
  height: 600px;
	display: inline-block;
	border-radius: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
  background-color: red;
}

.SNSicon img {
	display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    outline: none;
	border-radius: 5px;
	background-color: rgba(242,99,34,1);
	color: #F2F2F2;
	border-color: black;
	opacity: .9;	
  width: 100%;
  height: 100%
}

<div class="SNScontainer">
        	<div class="SNSicon">
				<img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/facebook.svg"/>
        	</div>
        	<div class="SNSicon">
				<img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/pinterest.svg"/>
        	</div>
        	<div class="SNSicon">
				<img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/instagram.svg"/>
        	</div>
        	<div class="SNSicon">
				<img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/twitter.svg"/>
        	</div>
</div>

display: inline-block使用display: inline代替<div class="SNSicon">，display: block使用display: inline代替.SNSicon img。您还可以将width的{​​{1}}和height设置为.SNSicon img，以便获取其父100%的尺寸。