У меня есть изображения, размеры которых (900x512). Поскольку я собираюсь сделать его отзывчивым, поэтому изображения должны корректироваться в пределах этой ширины экрана, поддерживая пропорции!Сохранение пропорций изображения с помощью CSS или jQuery?
Использование:
<img src="..." style="width: 100%; height: auto;" />
это будет держать коэффициент пропорциональности. height: auto будет убедиться, что height не установлен в другом месте (как уже упоминалось cale_b)
Вы можете достичь этого, только установив ширину или высоту в вашем CSS.
.image{
width: 40%;
border: 1px solid #ffffff;
}
Это не будет работать, если высота установлена где-либо еще. Вам также понадобится «height: auto»; чтобы высота не фиксировалась, а ширина была текучей. –
true, но тогда вы будете игнорировать точку, в которой вы должны ТОЛЬКО устанавливать ширину или высоту, а не обе. Если у вас есть контроль над собственным CSS, тогда это действительный и фактически единственный вариант. Как только вы установите высоту и ширину, это не сработает. – sillysicko
Если вы используете загрузчик, вы можете добавить img-responsive класс к вашим изображениям.
Этот класс применяет следующие свойства CSS
Разметка будет выглядеть следующим образом
<img class="img-responsive" alt="My image" >
Технически это не будет, если высота установлена в другом месте. Вам также понадобится «height: auto»; там. –
благодарит за информацию! – CoderPi