Сохранение изображения с определенной шириной / высотой

Question

Я сейчас получаю фотографии из Bing, к сожалению, вам нужно определить высоту / ширину изображения в URL. Я хочу, чтобы изображение карты всегда совпадало с таблицей слева, независимо от размера экрана рабочего стола или количества строк, добавленных в таблицу. Мне всегда нужна ширина, чтобы всегда заполнять весь контейнер col-7.

Я пробовал что-то вроде height:auto и width:100% и наоборот. Это никогда не работает на всех устройствах.

Похоже, что это очень простой вопрос, но я застрял на нем несколько часов, поэтому буду признателен за любую информацию.

<!-- 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>

Answer 1

Это отлично работает. вам нужно применить свойство background-image, чтобы оно работало нормально в каждом порту просмотра. Если вы внедрили это как изображение, оно не будет работать должным образом на небольших устройствах.

https://jsfiddle.net/Sampath_Madhuranga/mLto98bn/11/

.map {
      background: url('https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/34.17056,-118.8367/11?ms=950,700&od=1&c=en-GB&key=AijbFhynMi9YlUoC5sbBKfrfbnkcMJ34sYBEORQwbsviodnw8nTkkgh5se5COtMs') ;
      background-repeat:no-repeat;
      background-size:cover;
}

@media only screen and (max-width: 768px) {
  .map {
    min-height: 510px !important;
  }
}

<!-- 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 map">
<!-- <img src="https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/34.17056,-118.8367/11?ms=950,700&od=1&c=en-GB&key=AijbFhynMi9YlUoC5sbBKfrfbnkcMJ34sYBEORQwbsviodnw8nTkkgh5se5COtMs" width="100%" height="auto"> -->
</div>
</div>
</div>
</div>