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

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

div没有完全扩展到其全高

div中的第一个大img被调整大小

现在我明白了为什么会发生后者。它与高度有关，它是一个百分比，而不是一个离散的数字，因为当我把这个数字改成500px时，它工作得很好。但我不想那样做。我需要它保持一个百分比，当我需要使用，但调整大小，大图片

我也觉得这个问题可能与前一个问题相同，但我不确定

请帮我做这个

HTML:

aa和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")
             });
         }
     });
 });

这是小提琴：

这也是我得到的：

---

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

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

（）

此外，还应该缓存jQuery对象。在演示中，我将

$（this）

缓存到

var self=$（this）

，然后在其中引用self。初始化jQuery对象有很多开销，因此如果您多次使用同一选择器，请缓存它

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

（）

---

您还可以添加高度：自动以保持默认纵横比

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

---

谢谢你的回答，但我不知道它为什么会解决我的问题……你能解释一下吗？我想我无法从你的编辑中得到答案。

 $(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")
             });
         }
     });
 });

img.big {
    width: 85%;
}

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

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