html - 如何在工具栏上同时添加图像和文本而不溢出

Question

我有 mat-tab 并且我想放置从 accuweather API 获得的天气信息。我的工具栏是响应式和 flex 的。当页面大小改变时，这些图像会变小。这工作正常但是当我想添加温度信息时在图像下，溢出正在发生并且看起来很糟糕。我怎样才能使图像下的那些温度数字没有任何溢出。

实际 预计 现实 这是我在下面尝试的内容

        <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

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

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