I'm currently retrieving pictures from Bing, but unfortunately you have to specify the height/width of the image in the URL. I want the map image to always be aligned with the table on the left, regardless of the desktop screen size or the number of rows added to the table. The width should always fill the entire col-7 container.
I've tried using height:auto, width:100%, and vice versa, but it doesn't work on every device.
It may seem like a basic question, but I've been stuck on it for a few hours and would appreciate any input.
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<div class="information" style="background-color:gray;">
<div class="container-fluid no-pad-mar pt-4 pb-4">
<div class="row no-gutters">
<div class="col-md-5 col-12 text-center">
<div class="card">
<div class="card-body">
<h2 class="mb-4">Information about yxhrferfefe</h2>
<table class="table">
<tbody>
<tr>
<td>Population</td>
<td>127,942</td>
</tr>
<tr>
<td>Country</td>
<td>United States</td>
</tr>
<tr>
<td>TimeZone</td>
<td>America/Los_Angeles</td>
</tr>
<tr>
<td>Flag</td>
<td>Latitude</td>
<td>34.17056</td>
</tr>
<tr>
<td>Latitude</td>
<td>34.17056</td>
</tr>
<tr>
<td>Longitude</td>
<td>-118.8367</td>
</tr>
<tr>
<td>UTC Offset</td>
<td>-08:00:00</td>
</tr>
<tr>
<td>daylight</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-7 col-12 text-center">
<img src="https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/34.17056,-118.8367/11?ms=950,700&od=1&c=en-GB" width="100%" height="100%">
</div>
</div>
</div>
</div>