Как установить высоту изображения, равная высоте текста?

Чтобы установить высоту изображения, равную высоте текста, вам понадобится использовать CSS. Существует несколько способов достичь этого эффекта, я рассмотрю два наиболее распространенных:

1. Использование свойства "height" и "line-height":
В HTML вашему изображению следует присвоить класс или идентификатор, чтобы можно было обращаться к нему в CSS. Например, можно использовать следующий HTML-код:

   <div class="container">
     <img src="yourimage.jpg" alt="Your Image">
     <p>Your text here</p>
   </div>

В CSS можете добавить следующий код:

   .container {
     display: flex;
     align-items: center;
   }

   img {
     height: 100%; /* установите высоту изображения на 100% */
     line-height: 1; /* установите высоту строки на 1 */
   }

В результате изображение будет иметь высоту, равную высоте текста.

2. Использование свойства "display: table-cell":
В этом случае мы будем использовать свойство "display: table-cell" для изображения, чтобы обеспечить ему такую же высоту, как у текста. HTML-код будет выглядеть следующим образом:

   <div class="container">
     <div class="image-wrapper">
       <img src="yourimage.jpg" alt="Your Image">
     </div>
     <p>Your text here</p>
   </div>

Соответствующий CSS-код будет выглядеть так:

   .container {
     display: table;
     width: 100%;
   }

   .image-wrapper {
     display: table-cell;
     vertical-align: middle;
   }

   img {
     height: 100%; /* установите высоту изображения на 100% */
   }

В этом случае также будет достигнут желаемый результат, и изображение будет иметь высоту, равную высоте текста.

Оба этих метода позволяют создать изображение с высотой, идентичной высоте текста. Вам следует выбрать один из них, в зависимости от ваших предпочтений и требований к макету.