css - 可以设置宽度 % 但不能设置高度

Question

我是 css 的初学者，我试图找到答案，但我找不到。所以请多多包涵 :D

我的代码中有一个元数据(因为它是一个响应式移动网络)，我会展示它以防它与我的问题相关:

<meta name="viewport" content="width=device-width, 
   initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

这是我的代码的一部分，我想用 css 更改 img width 和 height :

<div id="desc">
    <img alt="" src="images/MallDetail/MallDesc.png">
</div>

所以我尝试了这样的事情:

#desc img {
    float: left;
    width: 95%;
    height: 50%;
    margin: 0 2.5% 0 2.5%; 
}

然后发生了一件奇怪的事情:宽度工作正常，img width 大小是当前宽度的 95%，但是 height 不工作 - 它只是没有改变(它的 height 应该是当前高度的 50%)。

我还有 margin 0 和 padding 0 来重置我的 css。

为什么会这样？我应该怎么做才能让事情正常进行？

感谢任何帮助，感谢您的帮助:D

Answer 1

您不能使用 % 设置高度。使用 % 表示宽度时，高度会随着宽度的增加而自动增加。

你应该使用 min-height: 90px;然后高度根据内部内容增加。

例如

    <div id="mainContainer">

       <img src="HelloWorld" alt="" style="width:100%" />
       <div class"newContent">
       <h1>Hello</h1>
    </div>

</div>

CSS:

#mainContainer{
  min-height: 80px;
  width:100%;
}