0

How do I set a responsive proportional image that is relative to its own height – NOT its width?

simply setting... 

img{
    width: auto;
    height: 100%;
}

doesn't give me proportional dimensions for my image.

How can I do that?

Quinn Keaveney
  • 1,248
  • 1
  • 17
  • 39
  • easy: just don't specify a width, if you leave it unspecified, it should use the one specified dimension (height) and the aspect ratio of the image to determine width. pretty cool huh? – dandavis Nov 04 '15 at 20:46
  • Thats what I thought too! BUT somewhere along the way that approach stopped working. My build uses bootstrap and if I don't specify the width.. even if i specify auto, inherit OR initial the image width becomes distorted. HOWEVER if I specify the width in the inspector it will snap back... odd right? – Quinn Keaveney Nov 04 '15 at 20:49
  • 1
    yeah, BS messes up that simplicity with an img "reset" rule. one way around it we use at work uses an inline height dimension, and then this: `#main img {max-width: none;} img:not([height]) { height: auto;max-width: 100%;}` you can probably do the same to _width_, but not both at once. it was my clever little fix for the same issue, but your mileage may vary... – dandavis Nov 04 '15 at 20:57

2 Answers2

1

I've found the only consistent solution was a javascript one.

Introducing naturalWidth and naturalHeight.. supported on all browsers except IE8. There is also a work around for IE8. ( http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/ )

If you don't mind using jquery and underscore you could set each width like so.

$(window).load( function() {

    function imgWidth(){
        $("img").each( function(){
            nWidth = $(this)[0].naturalWidth;
            nHeight = $(this)[0].naturalHeight;
            nRatio = nWidth/nHeight;

            curHeight = $(this).height();
            $(this).css("width", curHeight*nRatio);
        });
    }
    imgWidth();

    var updateLayout = _.debounce( function(e) {
        imgWidth();
    }, 500);
    window.addEventListener("resize", updateLayout, false);
}
Quinn Keaveney
  • 1,248
  • 1
  • 17
  • 39
0

Image manipulation becomes stupidly convoluted in HTML/CSS. The height tags directly on the img get ignored in a lot of scenarios, depending on div properties. I think the simplest way is to create a div with the image in question set as the background.

.img-div {
height:x; width:x;
background:url(file/path/here.svg);
background-position:center;
background-size:auto 100%;

Here's a demonstration: https://jsfiddle.net/JTBennett/nukLf5m3/

Joel
  • 458
  • 3
  • 14
  • right.. this is a good approach but the problem is it doesn't reference the actual image's size and therefore can't be proportional to it's height. SO although it will fit any image within the container the image itself doesn't contribute any meaning toward the containers proportions. Good solution but not targeted towards the whole request. (missing proportional image that is relative to its own height) – Quinn Keaveney Nov 04 '15 at 23:53
  • I must be missing something - are you working with rasterized images that you would not want scaling above a certain size? The example here is maintaining perfect proportion relative to its height - I could help more if I had your code to look at because whatever your intentions of use are will dictate the best way to go about it. You mentioned bootstrap - if you want to find and replace all the values affecting "img" in the CSS and try working with the image's class settings again, you might find that a conflict was occurring. – Joel Nov 05 '15 at 02:37