Как добавить изображение и текст вместе без переполнения на панели инструментов

Question

У меня есть вкладка mat, и я хочу разместить информацию о погоде, которую я получаю от 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>

Примечание: без фактического Минимальный воспроизводимый пример Я не могу вам больше помочь.

Answer 2

Попробуйте установить максимальную ширину изображения с помощью CSS:

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