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

Любой, кто использовал twitter bootstrap, знает, что изображение можно сделать отзывчивым, используя класс img-responsive в теге html img. Однако эти изображения занимают 100% от ширины деления.

Как сделать изображение чувствительным, сохраняя при этом его первоначальную ширину?

Ответы

Ответ 1

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

<div class="imgwrapper">
   <img src="img.jpg" class="img-responsive">
</div>

CSS

.imgwrapper {
   width: 80%;
}

Вышеупомянутое теоретически должно сделать imgwrapper 80% ширины родительского элемента, а класс img-responsive на изображении заполнит всю оболочку.

Если это не ответит на ваш вопрос, не могли бы вы немного объяснить, что вы имеете в виду под keep original width, but make it responsive? Из-за того, что он реагирует на изменение размера изображения, это означает, что он не будет иметь первоначальную ширину.

Ответ 2

У вас должна быть обертка вокруг изображения, определяющая фактический размер родителя, который может быть использован для размещения этого изображения. Он будет связан с родительским div. Затем примените .img-отзыв к изображению. Это приведет к тому, что изображение будет иметь ту же ширину, что и обертка.

HTML

<div class="wrapper">
   <img src="your-image.jpg" class="img-responsive" />
</div>

CSS

.wrapper {
   width: 50%;
}

Если вы хотите сохранить исходный размер (размер будет меньше, но не выше), вы также должны добавить max-width, который должен соответствовать размеру оригинала изображения. Это перезапишет исходное значение 100%

.wrapper img {
    max-width: 280px;
}

Ответ 3

Класс .img-responsive применяет max-width: 100%; и height: auto; к изображению, поэтому, если вы хотите явно сохранить свою первоначальную ширину, вам нужно установить ширину изображения с использованием атрибута width тега img.