Как мне установить адаптивное пропорциональное изображение относительно его собственной высоты - НЕ его ширины

Question

Как установить пропорциональное пропорциональное изображение относительно его собственной высоты, а не его ширины?

просто настройка...

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

не дает мне пропорциональные размеры для моего изображения.

Как я могу это сделать?

Answer 1

Я обнаружил, что единственное последовательное решение - это JavaScript.

Представляем naturalWidth и naturalHeight.. поддерживаются во всех браузерах, кроме IE8. Существует также обходной путь для IE8. ( http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/)

Если вы не возражаете против использования jquery и подчеркивания, вы можете установить каждую ширину следующим образом.

$(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

Работа с изображениями становится тупо запутанной в HTML/CSS. Теги высоты непосредственно на img игнорируются во многих сценариях, в зависимости от свойств div. Я думаю, что самый простой способ - создать div с изображением, заданным в качестве фона.

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

Вот демонстрация: https://jsfiddle.net/JTBennett/nukLf5m3/