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

【问题标题】：Preventing IMG from Resizing and Inconsistent Div Height Change?防止 IMG 调整大小和不一致的 Div 高度变化？
【发布时间】：2015-05-22 04:34:37
【问题描述】：

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

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;
  }

aaa 和 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/

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

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

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

(Demo)

img.big {
    width: 85%;
}

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

编辑：

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

(Demo)

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

【讨论】：

感谢您的回答，但我不确定它为什么会导致我遇到任何一个问题...您能详细说明一下吗？我认为我无法从您的编辑中获得答案。

【解决方案2】：

您还可以添加height: auto; 以保持默认纵横比。

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

【讨论】：