Setting background based on element aspect ratio in pure CSS

Question

There is a div element and its size (both width and height) depends on its content. The content is loaded dynamically, so sometimes div width is greater than height and sometimes otherwise.

Is it possible to set different backgrounds in CSS for the case when width > height and for the case when width < height without JS?

I mean something like orientation media query, but for a given element, not the whole screen.

Using js, Once the content received, you probably need to dynamically read the width & height of the element and set a class or style property accordingly. — Husky Slava, Jun 16 '22 at 11:43

score 1 · Answer 1 · answered Jun 16 '22 at 11:36

1

For what I understand you want something like this:

.box {
  min-height:50px;
  margin:10px;
  border:1px solid;
  background:
    linear-gradient(green,green)   left/calc(100% - 800px) 100%,
    linear-gradient(yellow,yellow) left/calc(100% - 600px) 100%,
    red;
}

<div class="box"></div>

So basically and in this specific case, if the DIV is more than 800px, the color will be green, between 600 and 800px yellow and less than 600px will be red.

Hope I helped.

answered Jun 16 '22 at 11:36

Ricardo Silva

131
5

copied from here: https://stackoverflow.com/a/56669800/8620333 and doesn't answer the question – Temani Afif Jun 16 '22 at 11:40
Interesting trick, but I was looking for something more universal. Thank you anyway. – Shtole Jun 16 '22 at 12:50

Setting background based on element aspect ratio in pure CSS

1 Answers1