Truly responsive percentage image resizing independent of the container

Question

OK so I am looking for truly responsive percentage image resizing that is independent of the container. In other words I want to resize the image relative to it's own size.

The reason is so I can dynamically resize all images on a page for smaller screen sizes.

Now as this it to be used for a CMS solution for and the users are assumed HTML non-savy, we can't wrap the images with anything, we can't add a class/ID to them etc.

I will want to change all images on the page EXCEPT a certain few that I can apply classes or IDs to.

I am currently using:

img {
  -webkit-transform: scale(0.625) translate(-29%, 0); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.625) translate(-29%, 0); /* FF3.5+ */
      -ms-transform: scale(0.625) translate(-29%, 0); /* IE9 */
       -o-transform: scale(0.625) translate(-29%, 0); /* Opera 10.5+ */
          transform: scale(0.625) translate(-29%, 0);
             /* IE6–IE9 */
             /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}

.noScale, .userFeed img, .twitter img, .subLogo {
  -webkit-transform: scale(1) translate(0,0); /* Saf3.1+, Chrome */
     -moz-transform: scale(1) translate(0,0); /* FF3.5+ */
      -ms-transform: scale(1) translate(0,0); /* IE9 */
       -o-transform: scale(1) translate(0,0); /* Opera 10.5+ */
          transform: scale(1) translate(0,0);
            /* IE6–IE9 */
             /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}

This mostly works, BUT all image are still seen as being their original size by everything else, so it effectively gets padding around it to it's original size. Which is not a massive problem with a 62% reduction in size, but become a bigger problem as the reductions get smaller. Also obviously there need to be several implementations of media queries to deal with smaller and smaller screen sizes.

The translate is in there so the left edge of the image is still the left edge of the image.

I will consider JS/JQuery solutions, but really I want a CSS way of doing this that is compatible with modern browsers. So ie9+.

Before you suggest any of the following, the don't work from my testing, but I am happy to be proved wrong:

max-height/max-width (they still size against the container in some browsers) Zoom (not fully support, would be perfect if it was) height/widht (container size not image) Div wrapper (no good for what I am trying to do)

If I am being totally thick and approaching this completely the wrong what, no problem, just tell me please. Any help would be massively appreciated.

Thanks

Stephen

Answer 1

OK, so I am using this JQuery to do the resizing for me now, with the above CSS in a wrapper.

<script>
$( document ).ready(function() {
if (document.documentElement.clientWidth < 700) {
    $("img").hide();
}
    $( window ).load(function() {
    if (document.documentElement.clientWidth < 700) {
        $('img:not(".noScale, .subLogo")').each(function() {
            $( this ).css("width", "auto" );
            $( this ).css("width", this.width * ( $( document ).width() / 700));
            $( this ).css("height", "auto" );
            $( this ).show();
        });
    }
    $("img").show();
});
    $( window ).resize(function() {
    if (document.documentElement.clientWidth < 700) {
        $('img:not(".noScale, .subLogo")').each(function() {
            $( this ).css("width", "auto" );
            $( this ).css("width", this.width * ( $( document ).width() / 700));
            $( this ).css("height", "auto" );
        });
    }
    if (document.documentElement.clientWidth > 700) {
        $('img:not(".noScale, .subLogo")').each(function() {
            $( this ).css("width", "auto");
        });
    }
    }); 
}); 
</script>

AS I am sure you can tell I am no JQuery expert, but it work.

It hide the images (because it looked terrible seeing them suddenly resize, and if you try it before the page loaded, sometimes the image sizes were empty). Then it resizes them on some percentage calculation I decided on. Then it shows them. It hides and shows all the images, again because otherwise it just looked silly.

The setting of width to auto before the calculation is because otherwise it uses the already reduced image size, and that messes up the calculations.

It also does it all again on a window resize, but doesn't hide anything.

It can be slow to load on a mobile sometime, but once loaded, and switching between land and port, I couldn't see any delay.

Anyway it works for my needs, for now.

Would be great if anyone has a better solution. Because this is still not perfect, and I love perfect.

Anyone wants to tidy up/speed up my JQuery I won't object.

Thanks

Stephen