Javascript將容器調整為圖像大小

Question

我有一些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>

Answer 1

因此，如果我了解您的需求，那么您根本不需要任何js。 默認情況下，圖像僅占據其原始分辨率的寬度，從而使其大於其容器。 您可以通過在img上看到max-width: 100%來輕松解決此問題。

我在下面做了一個例子。 第一個img沒有最大寬度設置，但是第二個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工具使工作變得更加輕松。