Когда я добавляю отступы вокруг изображения в верхней части карты, когда в инструментах просмотра для мобильных устройств отображается изображение, оно не сохраняет соотношение сторон.Когда я возвращаюсь к полноразмерному виду, соотношение сторон хорошее.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>
Мой код
Изображение того, как оно выглядит в мобильном инструменте разработчика
Дело в том, что если я перейду к своей ручке с кодом в мобильном представлении dev tools, она, кажется, работает как надо, но из моего файла это не так.Вот почему я так растерялся.