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>

保持定义的宽度/高度的图像响应

1 个答案: