0

I have a bunch of dynamic images in my HTML. I want to apply certain limits to its size depending on the size of the image itself. For instance this is my code now :

.question_image {
    max-width: 300px;
    max-width: 300px;
}

But I want something like : 

.question_image {
    if ( image.height < 50px )
      max-width: 80%;
    else
      max-width: 300px;
    max-width: 300px;
}

My only problem is I need to be done with plain CSS, not SASS.

Is this posible?

Matias Barrios
  • 4,674
  • 3
  • 22
  • 49
  • Does this answer your question? [CSS Equivalent of the "if" statement](https://stackoverflow.com/questions/2446812/css-equivalent-of-the-if-statement) – Piotr Glejzer Feb 24 '20 at 17:01
  • 2
    No, but you might describe a little better what you're actually trying to accomplish. This approach is a bit odd, but there may be other solutions. – isherwood Feb 24 '20 at 17:01
  • Have you tried CSS clip-path? ( https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path ) Or using background images with background-position / background-size (cover or contain)? – conordarcy Feb 24 '20 at 17:10
  • using css, this seems to be difficult. can you use javascript? – Ranjit Singh Feb 24 '20 at 17:16
  • @isherwood Some images are "squared", like a logo, so a max-width of 300px is okay and it looks nice. Some of them are "rectangular", for instance, a 500x70 image. So I need those images to have a bigger max-width so they look better. – Matias Barrios Feb 24 '20 at 17:53
  • @RanjitSingh By looking at the linked answer, I can see there are no "IFs" at all in CSS. So I might try Javascript as you proposed. What might that look like? – Matias Barrios Feb 24 '20 at 17:56
  • You should revise your question (and tags) if you're changing approaches. – isherwood Feb 24 '20 at 18:14

0 Answers0