Changing Div Width via Javascript

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.

Instead of resizing the image, you could resize the post div and set the image width to 100%. Don't set image height at all. — Mike, Aug 19 '15 at 17:16
Check this http://stackoverflow.com/questions/10118172/setting-div-width-and-height-in-javascript — eric.m, Aug 19 '15 at 17:16
Emd4600, that was exactly what I needed, and it solved my problem perfectly. Thank you! — Green Cloak Guy, Aug 19 '15 at 19:26

score 2 · Answer 1 · answered Aug 19 '15 at 17:23

2

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.

answered Aug 19 '15 at 17:23

Joshua Coussard

204
1
7

Looking at this, my issue is that other than the aforementioned image, I do want to put other things within that post - a couple of tags, and a bit of text. Setting my image as a background for that would be very difficult to place text around in a consistent manner. Thanks, though. – Green Cloak Guy Aug 19 '15 at 19:30

score 0 · Answer 2 · answered Aug 19 '15 at 17:43

0

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

answered Aug 19 '15 at 17:43

Vince

757
1
8
16

I tried it, it doesn't work - I'm not sure if I'm trying to use it in the correct context, though. Even then, what I want has nothing to do with any of the objects' natural sizes - I wanted the post div to set its own boundaries based on where my image set its boundaries, not where it would be if it didn't have any (it would be larger than the screen, then - hard to look at.) – Green Cloak Guy Aug 19 '15 at 19:27

Changing Div Width via Javascript

2 Answers2