CODEWITHSUNDEEP
jqueryhtmlcssdom
Kasim Ahmic
Kasim Ahmic

Reputation: 312

If Image Is Larger Than Container, Add Class

Ok so I've been at this for hours to no avail. What I want to do, is write a script that does the following: when an image is larger than it's container, it adds the class "large" to it. But, if an image is smaller than it's container, it adds the class small to it. Here's what I have so far:

$(window).load(function() {
var screenImage = $('.image img');

// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr('src');

// Get accurate measurements from that.
var imageWidth = theImage.width;

// Find post width
var postWidth = $('.image').innerWidth();

$('.image img').each(function() {
    if (imageWidth > postWidth) {
        $('.image').find('img').addClass('large');
    } else {
        $('.image').find('img').addClass('small');
    }
});
});

Here's an example: http://jsfiddle.net/TheInfection/6fUgr/8

Instead, the end result for this script is that all images get the "large" class added to them. I've spent hours on Google, the jQuery website, etc. and I couldn't find the solution anywhere. Could someone help me?

Upvotes: 3

Views: 1843

Answers (3)

user926352
user926352

Reputation:

Looks like what you're trying to do is cap the width of any image(s) inside your element .post.

You can achieve this using the CSS property max-width, which became available in CSS2:

http://www.w3schools.com/cssref/pr_dim_max-width.asp

Browser Support

Unless you need to support ie6 and lower, this should be fine - there's a polyfill available even if you do:

http://caniuse.com/minmaxwh

See it in action

http://jsfiddle.net/vonky/NYF2v/

Markup - HTML

<div class="post">
        <img src="http://placehold.it/200x200">
            <br /><br />
        <img src="http://placehold.it/600x600">
</div>

Markup - CSS

.post {
    width: 300px; /* cap the width of our DIV.post */
    margin: 0 auto; /* for visual reference, let's center our element */
    background-color: #00B2EE; /* for visual reference, let's make it blue */
    text-align: center; /* for visual reference, let's center our content */
}

.post img {
    max-width: 100%; /* this is the magical faerie dust */
}

If you are adding the classes for another reason and need the classes added, PSL's initial script looks like it should work.

Upvotes: 1

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

There are several mistakes in your logic, as far as I understood:

  1. $('.image img') this selects more than 1 image objects, so the src property would not be the one, that is expected.
  2. You should recalculate the size of each image and assign a class to one image object. $('.image').find('img').addClass('large'); assigns .large class to every image.

This example shows the proper usage of .each(function(idx, item) method for your purposes.

Upvotes: 3

PSL
PSL

Reputation: 123739

See if this is what you are looking for.

Demo

var postWidth = $('.post').innerWidth();
$('.image img').removeClass('large, small') ;
    $('.image img').each(function() {

        var imageWidth = this.width;
        if (imageWidth > postWidth) {
            $(this).addClass('large');
        } else {
            $(this).addClass('small');
        }
    });

Upvotes: 4

Related Questions