Я хочу уменьшить ширину контейнера до размера изображения. Высота указана в процентах относительно окна браузера.
.img
{
width: auto;
height:100%;
}
.container
{
height:100%;
width:auto;
}
Вот скрипка:
display:table, как и в подобных случаях, не работает, поскольку в качестве ячейки таблицы изображение всегда отображается на 100% от его первоначального размера.
Думаю, я получу лучшее решение этой проблемы. Проверьте мой код:
<!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>
Поскольку я задал этот вопрос, я сделал некоторый прогресс, разрешение было невероятно простым: просто добавьте 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/
Единственный способ, которым я знаю (или могу думать в данный момент), чтобы контейнер соответствовал размеру его содержимого, - это float ing. Если это вариант, это может получить то, что вы ищете. (здесь ваш обновленный скрипт с float:left; добавлен в .vertainer http://jsfiddle.net/EdgKr/61/)
Если вы просто хотите, чтобы контейнер соответствовал высоте и ширине изображений, aka shrink wrap существует несколько вариантов:
поплавок: левый/правый, Дисплей: встроенный блок, дисплей: стол, позиция: абсолютная;
каждый из них вызовет эффект усадки при отсутствии ширины.
Я рекомендую использовать встроенный блок для этого.
Кроме того, похоже отображение: таблица работает просто отлично:
http://jsbin.com/isayar/1/edit
однако он не поддерживается в IE7, поэтому лично я бы пошел с встроенным блоком.
Довольно простой
добавить display: inline-block в .container
причина, по которой он показывает зеленый цвет на вашей скрипке, - это блок отображения, который делает его пригодным для всей ширины