бутстрап 4 img-жидкость не изменяет высоту изображения

Отзывчивые изображения в Bootstrap 4, с классом .img-fluid, непропорционально изменяются. Они сохраняют высоту даже при правильной усадке. Это деформирует весь образ. Есть ли способ сделать его таким же плавным, как и в Bootstrap 3 с классом .img-отзывчивым? Благодарябутстрап 4 img-жидкость не изменяет высоту изображения

<div class="col-sm-6"> 
    <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt=""> 
</div>

Кстати оно такое же в Bootstrap 4 документации (https://v4-alpha.getbootstrap.com/content/images/), где образец SVG изображения сохраняет высоту 250 пикселей, независимо от его ширины.

источник

2017-01-26 Igor Mizak

Просьба представить фактический код. Благодарю. –

У меня тоже такая проблема. Карусель завернут в класс '.row', но не фактические изображения. И когда я удаляю обертку '.row', она все еще не работает –

Если вы установили свойство css height на auto, тогда при изменении размера высота будет также текучей.

источник

2017-01-26 09:55:30 gotomanners

это правило Bootstrap 4 css, примененное к классу img-fluid: .img-fluid { max-width: 100%; высота: авто; } –

@IgorMizak Точно! Если вы проверите пример документации по загрузке, вы увидите, что он явно устанавливает «height: 250px». Вот почему он остается фиксированным, поэтому, если вы его удалите, вы увидите изменение высоты изображения при изменении размера. – gotomanners

да только что заметил, что свойство свойства элемента установлено на 250 пикселей, но я не установил высоту нигде. и изображение деформировано. На самом деле я нашел, в чем проблема :) Отвечу самому –

Проблема была в том, что я обернул изображение в div с классом .row, у которого свойство отображения установлено в flex. один раз удалил этот класс из родительского div-изображения, работающего как ожидалось

источник

2017-01-26 11:56:43

Фактически height:auto не работал для меня, но height:100% работал как чемпион.

источник

2017-08-22 11:22:25 bwk

Моя магия НАХ

<style> 
    figure { 
     margin: 16px 40px !important; 
    } 
    .img-fluid { 
     max-width: 100%; 
     height: auto; 
    } 
</style> 
<div class="row align-items-center"> 
    <div class="col-lg-2"> 
     <figure> 
      <img class="img-fluid" src="path-image.png" /> 
     </figure 
    </div> 
</div>

источник

2018-03-08 09:07:55

Можете ли вы объяснить, что происходит в вашем коде? –

@SteveBuzonas мой родной язык не английский, поэтому я не могу объяснить правильно :) Но это поможет решить проблему, надеюсь :) –

бутстрап 4 img-жидкость не изменяет высоту изображения

ответ

Смежные вопросы