带有百分比的图像大小会减慢网站速度答案

【问题标题】：Image size with percentage slows down site带有百分比的图像大小会减慢网站速度
【发布时间】：2014-06-18 11:33:54
【问题描述】：

有点连线，但这就是问题所在。我有 jQuery 动画和许多其他事件在我的 css 文件中正常工作时，图像宽度和高度以像素为单位，但是当我以百分比或自动设置它们时（高度：100%；宽度：自动；-> 我需要什么它是），我的整个网站变慢了。事件不会立即触发，我的动画根本不流畅（我只看到 2 或 3 帧动画）。任何想法可能是什么问题或如何解决？

我的动画示例（左右为 div）：

  $("#left").animate({"width":"+=15%"},"linear");
  $("#right").animate({"width":"+=15%"},"linear");

CSS：

 img {
   height: 100%;
   width: auto;
 }

【问题讨论】：

试试这个：stackoverflow.com/a/12940695/2236219
我没有尝试以百分比为 div 和图像未连接并且可以单独工作，问题是图像宽度和高度的百分比和自动值减慢了我的网站。
@veili_13 为什么你需要 auto？你不能去width: 100%; box-sizing: border-box吗？
@HerrSerker 我希望我的图像与我的容器一样高，并且宽度可以正确调整到高度，并且我在一个容器中有更多图像
也许这不相关：但是是数字八 (8) 的倍数吗？如果不是，请尝试剪切图像以适合宽度为 8 的倍数。

标签： javascript jquery html css

【解决方案1】：

每当我在使用动画时遇到网站性能问题时，几乎总是涉及图像太大。由于您使用的是百分比大小，因此您的图像可能不会立即明显超过它们需要的大小。

现在的平均桌面屏幕尺寸为 1366×768，这意味着对于大多数网站，全屏画廊的最大图像宽度/高度应为 1366/768 （如果这些图像用作图标/缩略图，则显然更少）。

在开发者面板中检查图片的原生尺寸，并确保它们不超过这些尺寸：这可能会很好地解决您的性能问题。

【讨论】：