Как ограничить ширину DIV'a в зависимости от контента? или конфликт в CSS

Общее
1

Кто может подсказать, как ограничить ширину DIV’a в зависимости от ширины изображения, помещенного в него кроме float и inline-block, width: auto

Почему кроме? Потому, что как только эти свойства написать div’у с классом display-template перестает почему-то работать класс img-responsive, примененный к фото фотоаппарата. А width: auto вызывает проблемы при ширине окна <750px. Там же и появляется проблема, если убрать из display-template float или inline-block

Не пойму почему происходит конфликт display-template и img-responsive

Проблема проявляется в FF, IE.

В Хроме проблемы нет.

Ссылка на то что сделано
http://o-blog.ru/igntv-test/

p.s. над адаптивностью еще работаю, так что при не больших размерах окна много чего криво.

Пока споткнулся на “фотоаппарате”

2

Заметил синтаксическую ошибку в CSS-файле:

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

Если её поправить, всё уже будет больше похоже на правду.

А по вашему вопросу вы правы: самый простой способ — inline-block.

4

Решение найдено.
было <img class="img-responsive" src="img/canon.jpg">
стало <img class="img-responsive" src="img/canon.jpg" style="width: 100%; height: auto;">
т.е. принудительно написать эти 2 свойства, повысив их приоритет.

5

можно и так, конечно, но проще в CSS всё таки ошибку поправить, из-за неё не применяются стили =)

6

ну так а что за ошибка?

7 
width: 100% \9;
8

ну я бы это ошибкой не назвал

http://stackoverflow.com/questions/8004765/css-9-in-width-property

к тому же эта “ошибка” никоем образом не мешает отрабатывать img-responsive когда в display-template отсутствует float или inline-block

9

Из-за хака в фф и не срабатывали те стили, которые вы в инлайном прописали =)
Смысл использовать хак, если его переопределять инлайновым стилем?

10

Касаемо переопределения инлайновыми стилями - для IMG вроде как это даже лучше, когда в атрибутах прописана ширина и высота. Ну для СЕО точно помогает =)

11

У картинки да, размеры указывать полезно. Тогда браузер не будет пересчитывать её размеры лишний раз.