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;然后根据内部的内容增加高度。

e.g。

    <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%;
}

Answer 2

如果宽度正常工作，那么img只需要height:auto;我想在构建流体网站时让我的imgs填充他们的父母，所以设置另一个width和margin desc。如果图像是方形并且您想要保持高/宽比，这将正常工作。

#desc {
    float: left;
    width: 95%;
    margin: 0 2.5% 0 2.5%; 
}
#desc img {
  width:100%;
  height:auto;
  display:block;
}

如果这不是目标，调整身高的最佳方法是使用javascript。我通常在宽度上应用一个比例来获得高度。

jquery的

var descImg = $('#desc img')
descImg.height( descImg.width() * 0.5 + 'px' );

能够设置宽度％而不是高度

2 个答案: