Question

我在这里遇到一种情况，我无法理解。

.navigation {
  position: absolute;
}

.navigation > img {
  height: auto;
  max-width: 50%;
}

<div class="navigation previous">
    <img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/033256AM.png">
</div>

为什么怪异的div会得到png原始宽度的大小？我怎么解决这个问题？我需要父div使其子宽度和高度没有明确设置这些属性。

https://jsfiddle.net/gvng79s5/

Answer 1

因为您将导航样式应用于图像，而不是div。

如果您希望自己的图片占据div的大小，可以根据需要设置div的height和width，并为图片提供width: 100%：

.navigation {
    width: 20%; //change it
    height: 20%; //change it
}

.navigation > img {         
    width: 100%;
}

分叉你的小提琴here。

Answer 2

好吧，因为% percentage这是真的。默认div width的值为auto，因此，如果您在% percentage中定义子元素，那么在这种情况下，您的父级会根据子元素的宽度计算它的宽度当在% percentage中将100%的孩子分配给父母时。

在此处，我们将50% width分配给child element，而parent没有任何宽度。但它会自动分配，因为孩子需要50％的父母。而在px中两者都是相同的。

＆＃13;

/*Using Percentage*/
.navigation {
				position: absolute;
        background:#111;
   			}

			.navigation > img {
				height: auto;
				max-width: 50%;
			}
/*using pixels*/
	.previous {
				position: absolute;
                background:#111;
   			   }

			.previous > img {
				height: auto;
				width: 100px;
			}

＆＃13;

<div class="navigation"><img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/033256AM.png">
</div>

<br><br><br><br><br>

<div class="previous">
<img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/033256AM.png">
</div>

＆＃13;

为什么父div与包含图像的大小不同？

2 个答案: