Усадка div на изображение с процентной высотой

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

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

Вот скрипка:

http://jsfiddle.net/EdgKr/68/

display:table, как и в подобных случаях, не работает, поскольку в качестве ячейки таблицы изображение всегда отображается на 100% от его первоначального размера.

http://jsfiddle.net/EdgKr/67/

Ответы

Ответ 1

Думаю, я получу лучшее решение этой проблемы. Проверьте мой код:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <style type="text/css">
            * {
                -webkit-box-sizing: border-box; /* Android = 2.3, iOS = 4 */
                -moz-box-sizing: border-box; /* Firefox 1+ */
                box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
            }
            html, body
            {
                height:100%;
                width:100%;
                padding:10px;
            }
            .container {
                padding:0;
                background:green;
            }
            .img {
                display: inline;
                height:100%;
            }
        </style>
    </head>
    <body>
       <span class="container">  
            <img class="img" src="a.jpg"/>
        </span>
    </body>
</html>

Ответ 2

Поскольку я задал этот вопрос, я сделал некоторый прогресс, разрешение было невероятно простым: просто добавьте float: left.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height:100%;
    width:100%;
}

.container {
    background: green;
    float: left;
    height: 100%;
}

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

Контейнер сжимается, как ожидалось, даже если изображение имеет процентную высоту. http://jsfiddle.net/EdgKr/74/

Но это очень легко сломать, например, если вы добавите дополнение. http://jsfiddle.net/EdgKr/72/

Ответ 3

Единственный способ, которым я знаю (или могу думать в данный момент), чтобы контейнер соответствовал размеру его содержимого, - это float ing. Если это вариант, это может получить то, что вы ищете. (здесь ваш обновленный скрипт с float:left; добавлен в .vertainer http://jsfiddle.net/EdgKr/61/)

Ответ 4

Если вы просто хотите, чтобы контейнер соответствовал высоте и ширине изображений, aka shrink wrap существует несколько вариантов:

поплавок: левый/правый, Дисплей: встроенный блок, дисплей: стол, позиция: абсолютная;

каждый из них вызовет эффект усадки при отсутствии ширины.

Я рекомендую использовать встроенный блок для этого.

Кроме того, похоже отображение: таблица работает просто отлично:

http://jsbin.com/isayar/1/edit

однако он не поддерживается в IE7, поэтому лично я бы пошел с встроенным блоком.

Ответ 5

Довольно простой

добавить display: inline-block в .container

причина, по которой он показывает зеленый цвет на вашей скрипке, - это блок отображения, который делает его пригодным для всей ширины

http://jsfiddle.net/z7CT6/