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

Asked

Viewed 156 times

4

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

I use the Tinymce editor and when I send an image for posting or messages (pms) I have to set in a specific measure for each thing, otherwise the images "burst" the divs.

I learned to set a default display value with CSS but all images are with this value independent of being Landscape or Portrait :(

I would like, if there are, set different CSS rules based on the dimensions of the images, making the images Landscape have a pattern as images Portrait assume another display standard value.

javascript jquery css

  • How is the space you have for the images? " Niches" of fixed width and height, where images need to fit independently of appearance (Portrait or Landscape)?

  • @bfavaretto images are stored in the database and then displayed in a div...along with the content (texts, links, smilles, etc...) happens that if I set a default value one or the other become disproportionate pq I will end up making Portrait images to be displayed as Landscape for example :( why I think(? ) which java could make this parse and apply rules by proportion or percentage just don’t know how.

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();
    }
});

  • thanks for the help, in part what you wrote works I width, height and left in a good but...if I do an I or another if the second parameter does not work, only the first one works. Can you tell me how to make Else work ?

  • @Lauromoraes didn’t quite understand your problem when using Else, it was to work, if you can ask a question with your problem or edit this same question. But I believe that the bfavaretto solution presented is more appropriate to your problem, with max-width and max-height you limit the size of the image you enter and do not break its layout.

  • 1

    My question is this but they edited it by removing the ending that said: "with javascript". You understand two css rules via java. As you posted: if the length is longer than the width applies a css rule (wid, hei, lef) either wanted to make two then would make an "Else" in this example that vç posted...but the "Else" did not work. still grateful I’ll keep trying :)

  • @Lauromoraes included in the code Else.

  • 1

    @Lauromoraes had removed the java of the question because it is actually called javascript, java is another language.

  • 1

    q vç posted or saved my project rsrsr Thanks Man! Follow the example link of how it looked [link]http://jsfiddle.net/subversivo58/Ma8aR/2/ !! EDITED: I don’t know why when I mark your name with @ Paulo Maciel doesn’t appear here

  • You can’t mark me because you don’t need to mark the author of the answer. I’m glad it worked! Hugs

Show 2 more comments

3

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

img {
    max-width: 400px;
    max-height: 300px;
}

  • yes that was the css property I was using but all the images that come in the post or message will have the same size no matter what. Note: if I set a single size or it will be width may length, length greater than width or equal dimensions in this way inevitably miss one of the features of the image (or Landscape or Portrait) understand?

  • And the width corresponds to 550px normally photos for example are larger :(

  • @Lauromoraes I don’t understand the problem, this css makes the images fit without distorting. Example: http://jsfiddle.net/8CH4r/

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.