javascript - 通过 Javascript 改变 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 的类中我添加了这段代码:

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

但是帖子不会自行调整大小。作为引用，实际网页上的代码可以归结为

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

如果您需要多看看它，可以在 this link 找到它.

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 的文档. “包含”等其他值可能更适合您。