Question

max-width图像之外的容器大小有问题，图像本身的比例不高达60％。由于没有动态父级，我无法显示图像缩放问题。从#container中删除宽度/高度以查看问题。（请注意我在移动设备上查看此内容）

#container {
  width: 320px;
  height: 480px;
  background: white;
  border: 1px solid blue;
}

#img-container {
  position: relative;
}

#img-container img {
  position: absolute;
  max-height: 60%;
}

#leftover {
  background: yellow;
  width: 100%;
  height: 100%;
  color: white;
}

<html>

<head>
  <title>Stackoverflow example</title>

  <body>
    <div id="container">
      <div id="img-container">
        <img src="http://placehold.it/1024x1024.png" width="100%">
      </div>
    
      <div id="leftover">
        <h1>Should only have 40% leftover after the img-container takes up 60%.</h1>
      </div>
    </div>
    
  </body>
</head>

</html>

Answer 1

使用id="img-container"代替class="img-container"

检查你的CSS。

#img-container = id="img-container"

.img-container = class="img-container"

<div id="img-container">
        <image src="http://placehold.it/1024x1024.png" width="100%">
      </div>

Answer 2

你可以尝试

#img-container img {
  position: absolute;
  max-height: 60%;
}

Answer 3

您可以尝试稍微调整一下css如下：

html,body{
height: 100%
}

.container{
    height: 100%;
    background: white;
    border: 1px solid blue;
}

#img-container{
    position: relative;
    height: 60%;
}

img{
  max-height: 100%
}

#left-over{
    background: yellow;
    width: 100%;
    height: 40%;
    color: white;
}

h1{
  margin: 0;
}

图像上的最大宽度属性

3 个答案: