Плавные изображения с максимальной высотой вместо максимальной ширины

Таким образом, классический способ создания плавных изображений заключается в комбинировании max-width/height на img css.

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

однако я нахожусь в ситуации, когда я действительно хочу, чтобы размер изображения изменялся в зависимости от ограничения высоты контейнера, а не его ширины. Я думал, что простой обмен свойств поможет, но, видимо, не все так просто. Проверьте скрипку ниже. Если я установлю ширину контейнера (обтекание) в фиксированный размер в пикселях, изображение будет работать как надо. Однако, если я изменю img css на

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

и форсировать высоту пикселя, на самом деле ничего не происходит.

jsfiddle: смотрите обновления ниже

Просто чтобы дать вам немного больше понимания того, чего я пытаюсь достичь. У меня будет несколько полнооконных контейнеров, расположенных один над другим. Каждый контейнер должен занимать все пространство окна. Вот почему мне нужно, чтобы изображение изогнуло его размеры в зависимости от высоты контейнера (я знаю, что мне, возможно, придется прибегнуть к jquery для увеличения высоты контейнера).

спасибо за понимание


Обновить!

Я создал две скрипки, чтобы лучше проиллюстрировать мою конечную цель.

Я хочу иметь возможность складывать контейнеры, каждый из которых имеет высоту всего окна. Масштабирование изображения вверх или вниз плавно, чтобы помочь достичь этого.

fiddle1: элемент оболочки установлен на 100% ширина + высота. если ширина уменьшается, изображение плавно изменяется.

http://jsfiddle.net/1geyww63/

fiddle2: элемент-обертка установлен на заданную высоту пикселя. Я ожидал / представлял / скрестил пальцы, что изображение будет изменяться слишком плавно, приспосабливаясь ко всему содержимому и заданная высота контейнера будет соблюдаться. Однако этого не происходит.

http://jsfiddle.net/1geyww63/4/

Я надеюсь, что сделал себя более понятным. Я не хотел бросать туда слишком много информации. Мой главный вопрос остается в том, как сделать так, чтобы изображения плавно изменяли размер с помощью подхода, ориентированного на высоту, а не на ширину.

введите описание изображения здесь

2 ответа

Пожалуйста, проверьте эту http://jsfiddle.net/q24j47tt/2/. Если это то, что вы хотите. Вашему вопросу не хватает информации. Если вы, пожалуйста, уточните проблему, мы могли бы найти решение.

HTML

<body>
<div class="wrapper">
    <div class="main">
        <div class="content">
            <div class="hcenter">
                <img src="http://lorempixel.com/640/480/people" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas obcaecati consequuntur asperiores debitis. Corporis, dignissimos qui! Consequuntur ad, modi ex pariatur cupiditate optio recusandae dolores aperiam laudantium itaque aspernatur.
                    <br>More Lorem
                    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas obcaecati consequuntur asperiores debitis. Corporis, dignissimos qui! Consequuntur ad, modi ex pariatur cupiditate optio recusandae dolores aperiam laudantium itaque aspernatur.</p>
            </div>
        </div>
    </div>
    <div class="footer">footer content</div>
</div>

CSS

html, body {
            margin: 0;
            height: 100%;
        }
        img {
            /* img width responds to wrapper width*/
            max-width: 100%;
            height: 100%;

        }
        .wrapper {
            display: block;
            position: relative;
            height: 100%;
            width: 100%;
            background-color: yellow;
        }
        .main{
            display: block;
            height: 100%;
            position: relative;

        }
        .footer {
            display: table-row;
        }
        .footer {
            background-color: #333;
            color: #fff;
            height: 3em;
        }
        .main .content {
            vertical-align: middle;
            display: block;
            position: relative;
            height: 100%;
        }
        .hcenter {
            max-width: 600px;
            margin: 0 auto;
            display: block;
            position: relative;
            height: 100%;
        }

Я думаю, вы можете использовать позиции.

Вы должны установить обертку для относительного и img для абсолютного положения:

http://goo.gl/n5CkRx простой пример

Другие вопросы по тегам