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

Question

Вопрос:

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

Фон:

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

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

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

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

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

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

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

Answer 1

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

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

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

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

jsfiddle.net / saravanan7944 / ygamjz7s / 1

Answer 2

.img-max {
  max-width: 500px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<p class="alert-primary p-3">
  I can set the max-width of the image... but then it stops being responsive.
</p>
  



<div class="container">
  <div class="img-max">
  <img  class=" mx-auto d-block mb-2 float-md-left mr-md-4 img-thumbnail"  src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsa ea dolorem mollitia repudiandae odit dolore quod et voluptatem asperiores odio quam ipsam placeat nisi quo voluptate, laborum provident earum?
  </p>
</div>