Javascript将容器大小调整为图像大小

我有一点JS代码导致了一些问题

我有一个div，我称之为image window，它使用的是引导类col-xs-8，我需要它来保存图像，但是图像大小是动态的，所以我创建了另一个称为img container的容器

我试图做的是确保如果图像img容器比图像窗口大，则强制img容器与图像窗口大小相同

我所做的只是在某些时候起作用。。。我认为，如果图像加载时间比页面加载时间长，它似乎无法正常工作，我必须按几次“刷新”以使其正确调整大小

下面是我所拥有的，任何帮助都将不胜感激

<script>
    $(function () {
        var originalWidth = $('#image-window').width();

        var img = new Image();
        img.src = 'https://websitehere.com/fboQ2uivUPqBqTyi0ZtiPq.jpg';
        img.onload = function () {
            var newContainerWidth = img.width;
            if ( originalWidth >= newContainerWidth ) {
                $("#img-container").width( newContainerWidth );
            }
        };

    });
</script>

---

所以如果我理解你想要什么，你根本不需要任何js。默认情况下，图像仅在宽度上采用其本机分辨率，从而使其大于其容器。通过在img上看到最大宽度：100%，您可以轻松解决此问题

我在下面举了一个例子。第一个img没有“最大宽度”设置，但第二个img位于宽度为25%的容器中

.巨大的图像{ 宽度：25%； } .包含img的巨大图像{ 最大宽度：100%； }

---

你有没有理由不使用css来实现这一点？ 内置于css中的功能如下：

  #idofimage {
  width: 100%;
  }

  #Or use class if this is dynamic

  .idofimage {
  width: 100%;
  }

这将放在main style.css文件中，该文件在页面顶部由标记调用，或以//代码方式调用。 这将确保图像始终为容器宽度的100%，容器宽度是图像放入的标签

还有许多其他css样式，但使用javascript调整图像大小是技术性的，而像css这样的工具使生活更加轻松。

我建议在var img=new Image；之后尽快使用img.onload；；此外，我认为，在任何类型的动态上下文中设置宽度：100%是不好的主意，而不是IMG.OnFoad考虑IMG.AdvestTristNeLoad，函数{…}。放大图像，除非SVG，通常看起来很糟糕。我认为max width是一个更好的解决方案，除非设计要求它始终与容器的宽度完全一致，即使从本质上讲分辨率更小