Bootstrap отзывчивый img, но изменение высоты и ширины изображения

мой заголовок - это .png изображение, и я дал ему class="responsive-img", но заголовок выглядит большим.. как изменить высоту и ширину, но сохранить его меньше?

Ответ 1

Bootstrap 4

Bootstrap 4 представил несколько новых классов, касающихся изображений.

Адаптивные изображения теперь .img-fluid

Изображения в Bootstrap создаются с учетом .img-Fluid. максимальная ширина: 100%; и высота: авто; применяются к изображению, чтобы оно масштабировалось с родительским элементом.

пример:

<img src="..." class="img-fluid" alt="Responsive image">

Что делает img-fluid?

.img-fluid {
  max-width: 100%;
  height: auto;
}

Изображения, используемые в качестве эскизов, являются .img-thumbnail

Пример img-Fluid:

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- img-fluid -->

<div>
  <svg class="bd-placeholder-img img-fluid" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">img-fuid</text></svg>
</div>

Ответ 2

Здравствуйте, я пытаюсь изменить размер IMG с медиа-запросов. Он работает на моем ПК, но когда я загружаю его на сервер, он не будет использовать правила css для установленных медиа-запросов. Есть идеи почему?