通過Java腳本更改Div寬度

Question

我正在為我的美術館建立一個網站。 我需要做的部分工作是以向觀眾顯示圖像的方式來顯示它們。 我想做到這一點而又不降低圖像質量，也不必保存所有不同尺寸的圖像以迎合每個用戶。

因此，我制作了一個Javascript函數來調整圖像大小，使其完全適合查看器的屏幕。 我的代碼看起來像

<img src="[image.png]" onload="setGoodHeight(this);">

函數setGoodHeight（element）定義為：

function setGoodHeight (element) {
    if(window.innerHeight-50 < element.height) {
        var h = element.height;
        var w = element.width;
        element.height = window.innerHeight - 50;
        element.width = w * element.height / h;
    }
    if (window.innerWidth-100 < element.width) {
        var h = element.height;
        var w = element.width;
        element.width = window.innerWidth - 100;
        element.height = h * element.width / w;
    }   
}

簡而言之，它首先檢查圖像是否高於試圖顯示的屏幕，如果是（通常是），則將圖像調整大小以使其舒適地適合屏幕。 然后，在此之后，它檢查圖像是否比屏幕寬，如果是，則將其進一步縮小。 我已驗證此代碼有效。

但是，圖像包含在名為.post的類中，我希望發布區域至少以寬度包裝到圖像的區域，因此在我的javascript函數末尾，我添加了以下代碼：

element.parentNode.width = element.width + 40;

但是帖子不會自動調整大小。 作為參考，可以將與此相關的實際網頁上的代碼簡化為

<div class="post">
    <img src="[image.jpg]" onload="setGoodHeight(this);">
</div>

如果您需要查看更多信息，可以在此鏈接中找到它。

Answer 1

純CSS解決方案怎么樣，如果用戶調整瀏覽器的大小，它也會神奇地更新。

 html, body, #fullscreen { margin: 0; padding: 0; width: 100%; height: 100%; } #fullscreen { background: url('http://www.nathanrouse.org/wp-content/uploads/2014/01/CrashTestDummy.jpg') center center no-repeat; background-size: cover; } 

 <div id="fullscreen"></div> 

檢查文檔的background-size 。 還有其他一些值，例如“ contain”，可能更適合您。

Answer 2

我想你在找

item.naturalHeight
item.naturalWidth

我在功能中使用這些來設置最大高度和最大寬度

function imageLoad(item) {
     $(item).attr("max-height", item.naturalHeight);
     $(item).attr("max-width", item.naturalWidth);
}