Question

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

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

我要做的是确保如果图像（img-container）比图像窗口大，那么强制img-container与图像窗口的大小相同。

我只在某些时候工作但是...我认为如果图像加载的时间比页面长，它似乎不起作用，我必须按几次刷新才能得到它适当调整大小。

以下是我所拥有的，非常感谢任何帮助。

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

Answer 1

所以，如果我理解你想要的东西，你根本不需要任何js。默认情况下，图像只占用宽度的原始分辨率，使其大于其容器。您可以通过在img上看到max-width: 100%来轻松解决此问题。

我在下面做了一个例子。第一个img没有max-width设置，但是第二个img（它在宽度为25％的容器中）没有。

.huge-image-contained {
  width: 25%;
}

.huge-image-contained img {
  max-width: 100%;
}

<div class="huge-image">
  <img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>

<div class="huge-image-contained">
  <img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>

Answer 2

您是否有任何理由不使用css来完成此任务？内置于css的功能如下：

  #idofimage {
  width: 100%;
  }

  #Or use class if this is dynamic

  .idofimage {
  width: 100%;
  }

这将放在您的主style.css文件中，该文件在您的页面顶部通过<meta>标记或以<style> //code </style>方式调用。这样可以确保图片始终是容器宽度的100％，这是放置图像的<div>标记。

还有很多其他css styles，但使用javascript来调整图片大小是技术性的，而像css这样的工具可以让生活更轻松。

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

2 个答案: