I am currently developing a responsive web application using Bootstrap 4 and incorporating cards with images on one of the pages. The layout functions properly when resizing the window on desktop view; however, upon viewing it on mobile devices, I noticed that the height of the card image is significantly smaller than expected.
Below is the HTML code snippet:
<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>
To maintain uniform card height, I applied the following CSS code, which appears to be causing the issue of the image appearing very small on mobile devices.
CSS:
#playerCardImage {
width: 100%;
height: 15vh;
object-fit: cover;
}
You can view an example of the card on Codepen here: https://codepen.io/franchise/pen/MWaoXOp.
Additional Details:
- The sizing issue does not occur when inspected using Chrome Dev Tools for mobile view; it displays as expected on mobile devices.
- To replicate the problem, access the Codepen link on a mobile device to see the image displayed at around half the size compared to desktop view.
I would appreciate any insights on what might be causing this discrepancy. Thank you for your assistance in advance.