如何设置相对于自身高度而非宽度的响应比例图像

Question

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?

Answer 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);
}

Answer 2

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/