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>

如果您需要再查看一下，可以在this link找到它。

Answer 1

纯CSS解决方案如何，如果用户调整浏览器大小，它也会神奇地更新。

＆＃13;

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

＆＃13;

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

＆＃13;

检查background-size的文档。还有其他值，例如＆＃34;包含＆＃34;这可能更适合你。

Answer 2

我认为你正在寻找

string mystring, token ;
size_t next_token ;
// fill 'mystring'
while (token != mystring) {
    next_token = mystring.find_first_of (" ") ;
    token = mystring.substr (0, next_token) ;
    mystring = mystring.substr (next_token + 1) ;
    // do something
}

我在函数中使用这些来设置max-height＆amp;最大宽度

item.naturalHeight
item.naturalWidth

通过Javascript更改Div宽度

2 个答案: