Как установить максимальную ширину адаптивного изображения (Bootstrap 4)?

Вопрос:

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

Справочная информация:

  • Класс .img-fluid Boostrap 4 делает изображения адаптивными.

максимальная ширина: 100%; и высота: авто; применяются к изображению так, чтобы оно масштабировалось вместе с родительским элементом (https://getbootstrap.com/docs/4.1/content/images/)

Моя ситуация:

  • См. JS Fiddle: https://jsfiddle.net/aq9Laaew/290257/
  • У меня изображение очень большое ... слишком большое.

  • Я установил max-width: 500px (встроенный стиль), и это устанавливает ширину изображения - Awesome.

  • Проблема: он не изменяет размер и не реагирует при уменьшении размера окна ... Он больше не реагирует.

Надеюсь, это было ясно; Я пытался найти здесь похожие вопросы, но безуспешно. Ваше здоровье!


css bootstrap-4 responsiveness
person daCoda    schedule 11.12.2018    source источник
comment
вместо px определите ширину в процентах, скажем width = 100%;   -  person Saravanan    schedule 11.12.2018
comment
Проверьте jsfiddle.net/saravanan7944/ygamjz7s/1.   -  person Saravanan    schedule 11.12.2018

Ответы (1)


arrow_upward
11
arrow_downward

Ваш ответ здесь

.img-max {
  max-width: 500px;
  width:100%;
}

и используйте класс на изображении.

Я отредактировал вашу скрипку. Пожалуйста, обратитесь по ссылке

jsfiddle.net/saravanan7944/ygamjz7s/1

person Saravanan    schedule 11.12.2018