Is it possible to have more than one CSS rule for an "img" in a "div"?

4

How to apply two (or more) CSS rules to elements img of within a div ?

I use the TinyMCE editor and when I send an image to post or messages (pms) I have to be in a specific measure for each thing, otherwise the images "pop" the divs .

I've learned how to set a default display value with CSS, but all images are set to landscape and portrait :

I would like to set different CSS rules based on the dimensions of the images, so that the landscape images have a pattern while portrait images assume another pattern value of display.

    
asked by anonymous 06.05.2014 / 02:34

2 answers

4

You can check the size of each image and assign a style using JQuery as follows:

$('img').each(function(){
    if ($(this).width() > $(this).height()){
        //$(this).css();
    }else if ($(this).width() < $(this).height()){
        //$(this).css();
    }else{ //quando a largura e altura forem iguais:
        //$(this).css();
    }
});
    
06.05.2014 / 03:23
3

With CSS you can make the images automatically adjust to an area of fixed dimensions. For example, in an area of 400px per 300px:

img {
    max-width: 400px;
    max-height: 300px;
}
    
06.05.2014 / 05:09