Любой, кто использовал twitter bootstrap, знает, что изображение можно сделать отзывчивым, используя класс img-responsive в теге html img. Однако эти изображения занимают 100% от ширины деления.
Как сделать изображение чувствительным, сохраняя при этом его первоначальную ширину?
Вы можете поместить изображение в оболочку и предоставить оболочке ширину, которую вы хотите иметь. 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? Из-за того, что он реагирует на изменение размера изображения, это означает, что он не будет иметь первоначальную ширину.
У вас должна быть обертка вокруг изображения, определяющая фактический размер родителя, который может быть использован для размещения этого изображения. Он будет связан с родительским 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;
}
Класс .img-responsive применяет max-width: 100%; и height: auto; к изображению, поэтому, если вы хотите явно сохранить свою первоначальную ширину, вам нужно установить ширину изображения с использованием атрибута width тега img.