Question

目前我有一个巨大的div会从它自动生成的高度崩溃到div标题的高度。（即32px）。我开始折叠然后当我点击它打开它的全尺寸，显示其所有内部信息，然后当我再次点击时，它再次折叠。不幸的是，有两件事情发生了：

div并没有完全扩展到它的全高。
div中第一个大的img被调整大小。

现在我理解为什么后者正在发生。它与高度是一个百分比而不是一个离散数字有关，因为当我将数字改为500px时，它的效果很好。但我不想这样做。我需要它保持一个百分比，以便我需要使用，然后调整大图片。

我也觉得同样的问题也可能与之前的问题一致，但我不确定。

请帮助我。

HTML：

<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
    <div class="example"> <span class="h2">DIV Example</span>

        <br />
        <img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
        <p>This is a big picture. It's here to show what this thing is supposed to be doing.
 However, this picture has been squished so that it can fit within the div nicely. I am
 writing a bit so that I can take up space.</p>
        <img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
        <p>This is a big picture. It's here to show what this thing is supposed to be doing. However, this picture has been squished so that it can fit within the div nicely. I am writing a bit so that I can take up space.</p>
    </div>
</body>    
</html>

CSS：

 div.example, div.example img {
      border: 3px solid #402468;
      border-radius: 6px;
  }
  div.example {
      color: white;
      margin: 0 15px;
      background-color: #504689;
      overflow: hidden;
  }
  img {
      display: block;
      margin: 0 auto;
  }
  img.big {
      width: 85%;
      height: 85%;
  }
  /*further formatting: pay no mind*/
  div p {
      text-indent: 15pt;
      margin: 0 15px;
  }
  .h2 {
      font: 32px"Times New Roman", serif;
      color: #678900;
  }

aaaand jQuery：

 $(document).one("ready", function () {
     $("div.example").each(function () {
         $(this).data("height0", $(this).height());
         $(this).height("32px");
     });
 });
 $(document).ready(function () {
     $("div.example").click(function () {
         if ($(this).height() !== 32) {
             $(this).animate({
                 height: '32px'
             });
         } else {
             $(this).animate({
                 height: $(this).data("height0")
             });
         }
     });
 });

这是小提琴： https://jsfiddle.net/AirStyle/rb95K/35/

这也是我得到的： https://jsfiddle.net/AirStyle/rb95K/35/embedded/result/

注意：我可能没有将所用图片的百分比设置得足够小。如有必要，请减少它们。

Answer 1

完全删除高度设置，它将保持纵横比

（Demo）

img.big {
    width: 85%;
}

此外，您应该缓存您的jQuery对象。我在演示中通过将$(this)缓存到var self = $(this)然后在其中引用self来完成此操作。初始化jQuery对象有很多开销，所以如果你多次使用同一个选择器，请将其缓存。

编辑：

因为在扩展时将div的高度设置为固定高度，如果用户调整窗口大小，图像的宽度和高度都会增加。由于容器是固定高度，内容物将越过容器的末端并被切断。如果您想修复此问题，请在动画中添加“完整”功能，以移除高度设置并使其再次动态。

（Demo）

self.animate({
    height: self.data("height0")
},function() {
    self.height('');
});

Answer 2

您还可以添加height: auto;以保持默认的宽高比。

img.big {
    width: 85%;
    height: auto;
}

防止IMG调整大小和不一致的Div高度变化？

2 个答案:

编辑：