JQuery. Change container width based on orientation of img within

Question

I need to size a container based on the orientation of the img that is in it. So as to have a width:50% container for portrait images and a width:100% container for landscape images.

The JQuery i was able to come up with, does not work. It just adds one of the two classes independant of the content it seems.

Javascript:

$(".galleryelement").addClass(function() {
        if (".galleryelement img".height > ".galleryelement img".width) {
            return "portrait";
        } else {
            return "landscape";
        }
});

Rough HTML:

    <div class="gallery">

      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>  

    </div>

CSS:

.portrait {
    width: 50%;
}

.landscape {
    width: 100%;
}

I produced a Fiddle to illustrate the problem: JSFiddle

Hope someone spots my mistakes and can help. The code uses the flickity slider.

Have you tried using jquery to get the width+height? `if ($(".galleryelement img").height() > $(".galleryelement img").width()) {` — freedomn-m, Sep 02 '15 at 14:14
You can use `alert` or `console.log` to show what values you are currently getting, eg `console.log(".galleryelement img".height)` gives `undefined` — freedomn-m, Sep 02 '15 at 14:16
Your `if` condition is the same as `if (undefined > undefined)` — Andreas, Sep 02 '15 at 14:16
Ok, but how could it be defined? i tried adding width and height to the html. Didn`t change anything. My Javascript and JQuery knowledge is not very firm. https://jsfiddle.net/wgqdsnmk/6/ — Typetecture, Sep 02 '15 at 14:26

score 3 · Accepted Answer · answered Sep 02 '15 at 14:36

".galleryelement img" is a valid selector but doesn't yield you a jQuery object containing the matching elements.

After fixing this ($(".galleryelement img")) the next step would be to call the method .height(). Without the parentheses this would give you the function itself and not the return value after calling it.

With this we have now:

$(".galleryelement img").height()

The same has to be done for the second part of your if condition.

$(".galleryelement img").width()

The if condition would now be

if ($(".galleryelement img").height() > $(".galleryelement img").width())

Now we don't compare undefined with undefined :)
But this doesn't produce the expected result yet.

".galleryelement img" returns all images matching this selector but you only need the image of the current .galleryelement. And because we don't want to create a jQuery object for the same image twice we save the object in a variable and use that in the if

$(".galleryelement").addClass(function () {
    var img = $(this).find("img");

    if (img.height() > img.width()) {
        return "portrait";
    } else {
        return "landscape";
    }
});

fiddle

score 0 · Answer 2 · answered Sep 02 '15 at 14:34

0

Meybe you can use CSS3 solution like the code below:

@media only screen
and (orientation:portrait)
and (max-aspect-ratio: 13/9)
{
.galleryelement{
    width: 50%;
 }
}

@media only screen
 and (orientation:landscape)
 and (min-aspect-ratio: 13/9)
{
 .galleryelement{
    width: 100%;
 }
}

answered Sep 02 '15 at 14:34

guvenckardas

738
4
8

it's actually not a responsive CSS question, OP wants wide images (landscape) ef sponge bob) to be resized in the way that tall images (portrait) are- at the moment landscape images cut off the right handside of the image. It uses the Flickity plug-in which is already response. It just doesn't handle different image sizes well. – Mousey Sep 02 '15 at 16:05

score 0 · Answer 3 · answered Sep 02 '15 at 16:03

Your jsfiddle only runs on document ready - and only for the first image - as well as the jquery not working.

This is a fiddle https://jsfiddle.net/wgqdsnmk/10/ that does not need a new class to be applied and searches through evey image to swap the height and width around before they are shown. It does not assume that 50% width is best for portrait, and runs only one. It uses less CSS.

It runs for every image on the page but if you add the same class name to each image in the HTML and use getElementsByClassName (instead of getElementsByTagNname) it will not alter other images. Another option could be improved further by removing the for loop and running it when the Next button is clicked rather than on document ready. No HTML changes are needed.

$(document).ready(function() {
 var el = document.getElementsByTagName("img");
 for (i = 0; i < el.length; i++) {
     if (el[i].height > el[i].width) {
     } else {
    el2 = el[i].width;
    el[i].width=el[i].height;
    el[i].height=el2;         }
 }
$('.gallery').flickity({   
// options
cellAlign: 'left',
contain: true,
setGallerySize: false
});
});

CSS

.gallery {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
display: block;
}

.galleryelement {
height: 500px;
background-color: #e6e6e6;
overflow: hidden;
}

img {
 max-height: 500px;
}

JQuery. Change container width based on orientation of img within

3 Answers3