Предотвратить изменение размера изображения в загрузочной карте

Мне нужна карта с изображением без изменения размера на сером фоне. Карта больше, чем размер изображения. У меня есть фон и мое изображение, но мне не удается предотвратить изменение размера изображения.

<div className  = "container" id = "mainContainer">
  <div className  = "row mt-4">
    <div className = "col-md-4">
      <div className = "card" >
        <img  className = "card-img-top bg-light mb-3" alt = "" src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
         </img>
         <div className = "card-img-overlay">
           <span className = "badge badge-dark"> 1 </span>
         </div>
         <div className = "card-body">
           <h5 className = "card-title"> Bulbasur  </h5>
           <span className = "badge badge-light"> poison </span>
         </div>
      </div>
  </div>
</div>

я бы хотел этого Предотвратить изменение размера изображения в загрузочной карте

а у меня вот это Предотвратить изменение размера изображения в загрузочной карте

css reactjs twitter-bootstrap bootstrap-4

03.05.2019 14:17

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 690

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

в свой собственный файл CSS добавьте дополнительное определение для .img-responsive

.img-responsive 
{ 
    width:100%;
}

заменить код на

<img  className = "card-img-top bg-light mb-3 img-responsive " alt = "" src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
</img>

03.05.2019 14:25

Ответ принят как подходящий

Поместите изображение в отдельный контейнер DIV и используйте w-auto, чтобы переопределить поведение width:100% card-img-top

         <div class = "card">
            <div class = "text-center bg-light">
                <img class = "card-img-top mb-3 w-auto" alt = "" src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
            </div>
            <div class = "card-img-overlay">
                <span class = "badge badge-dark"> 1 </span>
            </div>
            <div class = "card-body">
                <h5 class = "card-title"> Bulbasur  </h5>
                <span class = "badge badge-light"> poison </span>
            </div>
        </div>

https://codeply.com/go/ACgUKJQMea

Это не приводит к той картинке, которую я хотел. Серый фон не закрывает все пространство изображения

— 03.05.2019 15:00

Затем переместите bg-light в содержащий div

— 03.05.2019 15:02

03.05.2019 14:33