Я работаю над адаптивным веб-приложением на Bootstrap 4 и использую карточки с изображениями на одной из страниц. Все работает нормально при любом изменении размера окна на рабочем столе; однако, когда я просматриваю их на мобильном устройстве, высота изображения карточки совершенно не соответствует размеру и примерно вдвое меньше, чем должна быть.
Вот HTML:
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div>
</div>
</div>
Ниже CSS был добавлен, чтобы все карты оставались одинаковой высоты, но это, кажется, вызывает проблема, из-за которой изображение на мобильном устройстве становится очень маленьким.
CSS:
#playerCardImage {
width: 100%;
height: 15vh;
object-fit: cover;
}
Кодовое описание с примером карты можно найти здесь: https://codepen.io/franchise/pen/MWaoXOp.
Подробности:
- Невозможно воспроизвести проблему размера с Chrome мобильным представлением Dev Tools, оно показывает только то, что я ожидал , как карта будет выглядеть на мобильном телефоне
- Чтобы воссоздать проблему, просмотрите Codepen на мобильном устройстве, чтобы увидеть, что изображение примерно вдвое меньше, чем при просмотре Codepen на рабочем столе.
Что мне здесь не хватает? Заранее благодарим за помощь.