1

我是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 widthand ：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

4

2 回答 2

1

如果宽度工作正常，那么 img 只需要height:auto;并且我喜欢在构建流体站点时让我的 imgs 填充他们的父母，所以设置 otherwidth和marginon 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' );
于 2013-06-21T17:39:15.057 回答
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%;
}
于 2013-06-21T17:03:00.277 回答