通过Java脚本更改Div宽度

Question

I'm making a website for my art gallery. Part of what I need to do is display images to the viewers in a way in which they can view them. And I want to do this without reducing the quality of the images, or having to save all of my images in many different sizes to cater to every user.

So, I've made a Javascript function to resize my images to fit completely on the viewer's screen. My code looks like

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

where the function setGoodHeight(element) is defined as:

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

In shorthand, this first checks whether the image is higher than the screen it's trying to be displayed on, and if it is (it usually is) the image is resized to fit comfortably on the screen. Then it checks if, after this, the image is wider than the screen, and if so it shrinks it further. I have verified that this code works.

However, the image is contained within a class called .post I want the post area to wrap to that of the image, at least in width, and so at the end of my javascript function, I added this code:

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

But the post doesn't resize itself. For reference, the code on the actual webpage concerning this can be boiled down to

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

and if you need to look around it a little more it can be found at this link .

Answer 1

How about a pure CSS solution, it will also update magically if the user resizes their browser.

 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> 

Check the doc for background-size . There are other values like "contain" that might suit you better.

Answer 2

I think you're looking for

item.naturalHeight
item.naturalWidth

I was using these in a function to set the max-height & max-width

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