Question

我有以下代码：

#containerDiv{
    width:40%;
    height:60%;
    position:absolute;
    bottom:0px;
    right:0px;
}

#myImage{
    position:relative;
    max-width:100%;
    max-height:100%;
}

<div id="containerDiv">
     <img id="myImage" src="img.jpg" />
</div>

当我调整浏览器的大小时，它通常运行良好，但有时会忽略max-height并拉伸图像，使其适合父div框的整个宽度。我该如何解决？

Answer 1

您发布的代码似乎没有任何问题。图像永远不会比它的父图像大。即使图像源大于父图像，它也会缩小以适应内部。你有div或img的其他CSS规则吗？

Answer 2

根据我对你想要达到的目标的理解，一种非常简单的方法可以保持图像100％的父div高度与不同的屏幕宽度，你可以使用绝对定位。

＆＃13;

body{
  width:100%;
  height:100vh;
  margin:0;
  padding:0;
}

#containerDiv{
    width:40%;
    height:60%;
    position:absolute;
    top:0;
    right:0px;
}

#myImage{
  position:absolute;
  top:0;
  bottom:0;
}

＆＃13;

<div id="containerDiv">
     <img id="myImage" src="http://lorempixel.com/1000/700/animals" />
</div>

＆＃13;

Answer 3

我能想到的唯一情况是，你的CSS中有一个规则，将width或height X 值应用于<img /> < / p>

这是一个有拉伸的演示：

https://jsfiddle.net/2pcrkL2v/2/

max-height max-width 100％但在调整浏览器大小

3 个答案: