如何在工具栏上将图像和文本一起添加而不会溢出

Question

我有 mat-tab，我想放置从 accuweather API 获得的天气信息。我的工具栏具有响应性和灵活性。当页面大小更改时，这些图像会变小。效果很好，但是当我想添加温度信息时在图像下，发生溢出并且看起来非常糟糕。如何使图像下的这些温度数字没有任何溢出。

实际 预期 现实 这是我在下面尝试过的

        <li>
           <div class="d-flex">
                   <div *ngFor="let dailyForecast of dailyForecasts">
           <img class="responsive" src="{{appConfig.weatherIconsPath}}{{dailyForecast.Night.Icon}}.png">       
<small>{{dailyForecast.Temperature.Minimum.Value}}°C /                                               
{{dailyForecast.Temperature.Maximum.Value}}°C</small>
             </div>                                                                                             
             </div>    
        </li>

Answer 1

应该这样做：

<li>
  <div class="d-flex align-items-center">
    <div *ngFor="let dailyForecast of dailyForecasts" 
         class="d-flex flex-column align-items-center">
      <img class="responsive" src="{{appConfig.weatherIconsPath}}{{dailyForecast.Night.Icon}}.png">
      <small>{{dailyForecast.Temperature.Minimum.Value}}°C / {{dailyForecast.Temperature.Maximum.Value}}°C</small>
    </div>
  </div>
</li>

注意：如果没有实际的Minimal, Reproducible Example，我无法为您提供更多帮助。

Answer 2

尝试使用 CSS 设置图像的最大宽度：

img.responsive {
max-width: 40px;
}