Odd issue with images not matching div width

Resolved amphibious
(@amphibious)

11 years, 2 months ago

The following sites are running the same basic theme with some minor edits to the PHP and CSS, both sites have WP Retina 2x installed, but only the first has it enabled.

http://matthewhappen.com/plugin-enabled/
http://rachelhappen.com/plugin-disabled/

When the plugin is disabled, you can resize the window and the image will always scale to fill the width of the div it is in. When the plugin is enabled, the image will only scale down, not up.

So… if you load both links in a 1000px+ wide window, you can make the window smaller and the image scales just fine.

But, if you load both links in a 400px wide window, and then you make that window bigger the @2x image will not scale up.

This image shows what the page looks like when it is loaded in a medium sized window (the image and text are the same width): http://matthewhappen.com/wp-content/uploads/loaded-medium-940×457.png

This image shows what the page looks like when it is loaded in a medium sized window and that window is then resized to a narrower window (the image and text are the same width): http://matthewhappen.com/wp-content/uploads/loaded-medium-window-made-smaller-940×725.png

This image shows what the page looks like when it is loaded in a small sized window (the image and text are the same width): http://matthewhappen.com/wp-content/uploads/loaded-small-940×789.png

This image shows what the page looks like when it is loaded in a small window and is then resized to be a medium sized window (the image has not scaled up and is narrower than the width of the text): http://matthewhappen.com/wp-content/uploads/loaded-small-window-made-wider-940×458.png

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Jordy Meow
(@tigroumeow)

11 years, 2 months ago

Well, I am not so surprised by this issue. First I would like to start by saying that the plugin creates the retina images for you and allows you to use the delivery method that you like. However, the script which loads those images (the client-side method) is “retina.js”. For this kind of issue, you might try their github forums (which seems to be extremely active).

The retina images need to have a fixed width and height (the “original” one) as otherwise they would be too big relatively to the website design. Based on that, having image dynamically changing size seems difficult to me… and should probably be handled manually.

Thread Starter amphibious
(@amphibious)

11 years, 2 months ago

Yeah, you’re correct. I tried using the script directly and the issue is present there.

Thanks.

Thread Starter amphibious
(@amphibious)

11 years, 2 months ago

I’ve “fixed” this by commenting out line 119 and 120 in retina.js:

that.el.setAttribute(‘width’, that.el.offsetWidth);
that.el.setAttribute(‘height’, that.el.offsetHeight);

This is probably causing some problem that I’m not aware of, but it solves the issue.

Plugin Author Jordy Meow
(@tigroumeow)

11 years, 2 months ago

That’s odd, I kind of remember somebody else doing the same change in the retina.js code. Did you find something related on their forum?

Thread Starter amphibious
(@amphibious)

11 years, 2 months ago

I actually discovered it independently after trying a number of different things… I posted about it on their forum and discovered that there’s a WIP version that has a config option that essentially shuts off the lines I commented out.

I replaced the standard retina.js in your plugin with the WIP retina.js and turned off the resizing and it works great.

https://github.com/imulus/retinajs/blob/0.1.0-wip/src/retina.js#L9

Plugin Author Jordy Meow
(@tigroumeow)

11 years, 2 months ago

I will include this WIP version in the new release, it seems just a better version 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Odd issue with images not matching div width’ is closed to new replies.