HTML

Question

我在CSS中的apple-pie-icons图像没有响应任何高度属性。它响应宽度，但不响应高度。

我可以将它包含在错误的div中吗？

我尝试过使用像素和高度百分比 - 没有回复。

我做错了什么？

HTML

`<div class="container">

  <div>



    <div>
      <img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">
      <h1>Apple Pie</h1>
    </div>

    <div id="description-container">
        <div id="Apple-pies">
        This was my grandmother's apple pie recipe. I have never seen another one
        quite like it. It will always be my favorite and has won me several first place
        prizes in local competitions. I hope it becomes one of your favorites as well!
        </div>

        <div class="apple-pie-icons">
          <img src="images/recipe-info.png">
        </div>

    </div>



</div>

`

CSS

* {
  font-family: Arial, Verdana, monospace;
}

.container {
 width: 80%;
}

 img {
  position: relative;
  width: 100%;
  height: 500px;

}

h1 {
  position: absolute;
  top: 175px;
  color: white;
  width: 100%;
  left: 32%;
  font-size: 300%;

}

#description-container{
  width: 650px;
  height: 800px;
  margin: 50px 200px 0px 200px;
}

#Apple-pies {

}

.apple-pie-icons{
  display: inline-block;
  height: 100px;
  float: left;
  width: 80%;

 }

Answer 1

图标是图像，CSS定义为

img {
  position: relative;
  width: 100%;
  height: 500px;
}

如果要更改高度，可以更改height属性，或者为图像指定一个类并更改高度（将图像标记更改为<img class="apple-pie-image" src="images/recipe-info.png">并通过.apple-pie-icons .apple-pie-image { height: 1000px; }），或者将图片本身的height设置为100%，然后更改父级的高度，在这种情况下为.apple-pie-icons。

您还拥有此图片（<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">），该图片在代码中具有内联width和height样式。值得注意的是，此图像不会响应CSS中定义的高度或宽度样式，因为内联样式将覆盖任何其他CSS。

Answer 2

尝试使用height样式定位图片本身。

现在你只是设置包装div的高度：

.apple-pie-icons {
  display: inline-block;
  height: 100px;
  float: left;
  width: 80%;
}

...试

.apple-pie-icons img {
     height: 100px;
     max-width: 100%;
}

或类似

.apple-pie-icons img {
   height: 100%;
   width: auto;
}

任何方式专门定位你想要设计样式的div中的图像。

Answer 3

即使您不想要它以保持它的纵横比，您的图像也可能正在增长。尝试添加更具体的类来限制图像大小或在浏览器中检查以查看覆盖div样式的内容。

宽度属性在CSS中响应，但高度不响应

HTML

CSS

3 个答案: