CSS to resize based on the target's dimensions rather than the container's dimensions?

Question

I have a number of images that are in the same scale but have varying dimensions. I want to be able to scale all of these images with CSS to X% based on their dimensions, rather than the dimensions of their container.

Given this simple (and somewhat dumb) example:

<div style="width: 500px;">
    <img src="none.png" style="width: 50%;" />
    <!-- none.png dimensions: 200px by 1000px (L x W)-->

    <img src="none2.png" style="width: 50%;" />
    <!-- none2.png dimensions: 500px by 800px (L x W)-->
</div>

none.png will be set to a width of 250px where my goal is 500px and none2.png will be set to a width of 250px where my goal is 400px.

So... what am I missing here? How can I get CSS to resize based on the target rather than the container?

This can be done with JavaScript of course $('img').css('width', $(this).width * 0.2)... but can it be done in CSS natively?

That can be done only using JS – volter9 Oct 09 '14 at 03:27 — volter9, Oct 09 '14 at 03:27

score 0 · Answer 1 · answered Oct 09 '14 at 03:20

0

img
   {
    min-width:50%;
    height:auto;
   }

answered Oct 09 '14 at 03:20

Heta

75
3

This doesn't work either, but in a different way: http://jsfiddle.net/aLynLhs6/1/ – Campbeln Oct 09 '14 at 03:24
apply width:auto; then check it – Heta Oct 09 '14 at 03:27

CSS to resize based on the target's dimensions rather than the container's dimensions?

1 Answers1