1
\$\begingroup\$

I've tried my best (I'm new to JS) to write a script that make an image fit to its parent div with respect of the ratio and overflowing when needed.

For example, if the height of the image is smaller than the window's height, I set the height equal to the window's height and the width overflow the window's width. I then horizontally center the image.

If the width is smaller than the window's width, I do the way around.

An example can be seen here: JSFiddle

Note that the example doesn't work as I'm seeing it on my browser (Chrome). Refresh simulation might not work properly.

The fact is that everything is working as expected when I refresh the page. If I try to resize the page, the ratio is not respected at all. But then again, If I refresh the page (after it's been resized), the image fits perfectly.

function imageFitToScreen() {
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var postThumbnailWidth = $('#postThumbnail').width();
  var postThumbnailHeight = $('#postThumbnail').height();
  var imageWidth = $('#postThumbnail').find('img').width();
  var imageHeight = $('#postThumbnail').find('img').height();
  if ((windowHeight < windowWidth) && (imageHeight < imageWidth)) {
    $('#postThumbnail').find('img').css('width', 'auto');
    $('#postThumbnail').find('img').css('height', '100%');
  }
  var imageWidth = $('#postThumbnail').find('img').width(); /* imageWidth value has changed with the if before */
  if ((windowHeight < windowWidth) && (imageWidth < postThumbnailWidth)) {
    $('#postThumbnail').find('img').css('min-width', '100%');
    $('#postThumbnail').find('img').css('height', 'auto');
  }
  if ((windowWidth < windowHeight) && (imageWidth < imageHeight)) {
    $('#postThumbnail').find('img').css('width', '100%');
    $('#postThumbnail').find('img').css('height', 'auto');
  }
  var imageHeight = $('#postThumbnail').find('img').height(); /* imageHeight value has changed with the if before */
  if ((windowWidth < windowHeight) && (imageHeight < postThumbnailHeight)) {
    $('#postThumbnail').find('img').css('width', 'auto%');
    $('#postThumbnail').find('img').css('min-height', '100%');
  }
}

$(window).on("load", imageFitToScreen);
$(window).on("resize", imageFitToScreen);

I double the var imageHeight and var imageWidth before they are called again because they change within the first and third IF.

I don't know if it's important for you to know that I'm changing the #postThumbnail width/height before I run this script.

function refreshDynamicSize() {
  $('#content').find('#postThumbnail').css('min-height', $(window).height() - $('header').height());
  $('#content').find('#postThumbnail').height($(window).height() - $('header').height());
  $('#content').find('#postThumbnailTitle').css('line-height', $(window).height() + 'px');
  $('#content').find('#extend').css('min-height', $('#postThumbnail').height());
}

$(window).on("load", refreshDynamicSize);
$(window).on("resize", refreshDynamicSize);

What I'm looking for is an optimisation of the code as it works on refresh but not on resize.

It might surely be really simple (like change in execution order, or an "on.load" something...).

\$\endgroup\$

closed as off-topic by Ethan Bierlein, mdfst13, SirPython, Quill, SuperBiasedMan Feb 20 '16 at 12:51

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions containing broken code or asking for advice about code not yet written are off-topic, as the code is not ready for review. After the question has been edited to contain working code, we will consider reopening it." – Ethan Bierlein, mdfst13, SirPython, Quill, SuperBiasedMan
If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ Welcome to Code Review! I believe your question is off-topic; is this code that you have broken? \$\endgroup\$ – SirPython Feb 19 '16 at 20:54
  • \$\begingroup\$ I guess not. Code was functionning but not perfectly. I wanted to improve it. \$\endgroup\$ – Séane Feb 19 '16 at 21:10
0
\$\begingroup\$

This seems like the kind of thing that should be done purely in CSS using media queries, specifically orientation. When the window is taller than it is wide, the rules inside

@media all and (orientation: portrait) { … }

… would apply. When the window is wider than it is tall, it would be

@media all and (orientation: landscape) { ... }

Furthermore, I would consider that image to be background-image styling for <h2>The post title</h2> rather than an <img> element in its own right. The scaling should be handled by a background-size rule.

\$\endgroup\$
  • \$\begingroup\$ Hi 200_success and thank you for your answer which is quite nice! I tried to follow it using the following code : @media all and (orientation: landscape) { #single\.php #postThumbnail img { width:auto; min-width: 100%; height:auto; min-height: 100%; } } @media all and (orientation: portrait) { #single\.php #postThumbnail img { width:auto; min-width: 100%; height:auto; min-height: 100%; } } But unfortunatly if the image is larger than the window it won't resize (get smaller) to fit. Am I missing something? \$\endgroup\$ – Séane Feb 19 '16 at 18:41
  • \$\begingroup\$ By the way, if I understand right your statement, I cannot make the image a background-image as it is generated by Wordpress. I'm actually making a template. And I don't want to mess around. \$\endgroup\$ – Séane Feb 19 '16 at 18:47
  • \$\begingroup\$ But you have full control over the CSS, right? Does the image src need to vary from page to page? \$\endgroup\$ – 200_success Feb 19 '16 at 18:50
  • \$\begingroup\$ I do, but I don't know how to manage how to put a generated URL inside a background-image: url(); I do think that the image src is page-dependent. Each article will have it's own thumbnail generated by wordpress. \$\endgroup\$ – Séane Feb 19 '16 at 18:53
  • \$\begingroup\$ I'm not that familiar with WordPress, but I suppose you could use a jQuery hack to extract the URL out of an <img src="…"> and transfer it to <h2 style="background-image: url(…)">. \$\endgroup\$ – 200_success Feb 19 '16 at 18:59
0
\$\begingroup\$

Thanks to @200_success I finally figured out a way to deal with it.

This is way simplier than my actual javascript script.

CSS :

#single\.php #postThumbnail {
    position: relative;
    z-index: 1;
    background: rgb(240, 240, 240);
    background: linear-gradient(to bottom, rgb(240, 240, 240)0%,rgb(225, 225, 225) 100%);
}

    #single\.php #postThumbnail img {
        display: none;
    }

#single\.php #postThumbnail #postThumbnailTitle {
    position: fixed;
    z-index: 2;
    display: table;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
}

 #single\.php #postThumbnail #postThumbnailTitle h2 {
            display: table-cell;
            vertical-align: middle;
            text-transform: uppercase;
            text-align: center;
            text-shadow: rgb(40, 40, 40) 0px 0px 2px;
            line-height: 1em;
            background-size: cover;
            background-position: top center;
        }

jQuery

function imageFitToScreen() {
    var url = $('#postThumbnail').find('img').attr('src');
    $('#postThumbnailTitle').find('h2').css('background-image', 'url(' + url + ')');
}
$(window).on("load", imageFitToScreen);
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.