CODEWITHSUNDEEP
htmlcssmedia-queries
Ky -
Ky -

Reputation: 32173

Can I dynamically resize an element's contents based on its own size?

I've become quite practiced at using media queries to dynamically change a DOM element ad-hoc. However, as far as I know, these are only able to detect the window/device width/height, and not individual DOM elements. I want to be able to make a CSS that will re-arrange and resize an element's contents based on that element's size. For instance:

╒══════════════════════════════╕
│Browser Window                │
├──────────────────────────────┤
│ ┌──────────────────────────┐ │
│ │.resizingParent           │ │
│ │┌──────┐ Some caption text│ │
│ ││ IMG  │ directly relating│ │
│ ││      │ to the image.    │ │
│ │└──────┘                  │ │
│ └──────────────────────────┘ │
│                              │
└──────────────────────────────┘
╒══════════════════════════════╕
│Browser Window                │
├──────────────────────────────┤
│ ┌───────────────┐            │
│ │.resizingParent│            │
│ │┌─────────────┐│            │
│ ││             ││            │
│ ││  I  M  G    ││            │
│ ││             ││            │
│ ││             ││            │
│ │└─────────────┘│            │
│ │Some caption   │            │
│ │directly       │            │
│ │relating to the│            │
│ │image.         │            │
│ └───────────────┘            │
│                              │
└──────────────────────────────┘

I'm hoping for the solution to be as simple as using media queries, such as the (invalid) code below:

<STYLE>
.resizingParent>IMG {
    display: inline-block;
    width: 25%;
}

.resizingParent(max-width:10em)>IMG {
    display: block;
    width: 100%;
}
</STYLE>

<DIV CLASS=".resizingParent">
    .resizingParent
    <IMG SRC="IMG.png" ALT="IMG"/>
    Some caption text directly relating to the image
</DIV>

Upvotes: 1

Views: 94

Answers (1)

cimmanon
cimmanon

Reputation: 68339

Unfortunately, media queries don't work that way. There are many options available in CSS that are naturally responsive (ie. they don't require media queries to reformat as the viewport changes sizes) depending on what kind of job you need done. For your particular problem, Flexbox is the best fit.

http://codepen.io/cimmanon/pen/Azone

figure {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 1px solid;
}
@supports (flex-wrap: wrap) {
  figure {
    display: flex;
  }
}

figure div {
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  margin: 1em;
  text-align: center;
}

figure figcaption {
  margin: 1em;
  -webkit-flex: 10 1 20em;
  -ms-flex: 10 1 20em;
  flex: 10 1 20em;
}

The HTML:

<figure>
  <div><!-- this div is mostly here to prevent our image from getting distorted -->
    <img src="http://placehold.it/200x200" />
  </div>

  <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio. Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus. Phasellus velit enim, tempus et lobortis eget, rhoncus nec dolor.</figcaption>
</figure>

Because we require our flex items to wrap, browser support is currently limited to Chrome, Opera, and IE10. http://caniuse.com/#feat=flexbox

Upvotes: 1

Related Questions