时间戳

首页 > 解决方案 > 保持具有定义宽度/高度的图像响应

html - 保持具有定义宽度/高度的图像响应

问题描述

我正在从 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>

标签： htmlcssbootstrap-4

解决方案

这工作正常。您需要应用 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>

推荐阅读