Блог

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

Я нашел много способов, которыми, как предполагается, это можно сделать, но ни один из них не сработал.

Как видно из этой скрипки:

https://jsfiddle.net/60shvm8d/2/

Я хочу, чтобы на больших дисплеях изображение было обрезано object-fit: cover и имело ту же высоту, что и текст, но на меньших дисплеях я хочу, чтобы div справа был таким же высоким, как изображение, и имел прокрутку.

Как я могу этого достичь?

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

Это проще, если вы знаете, что вам нужно. Например, «таблица-ячейка» будет ответом на ваш вопрос.

Вот ссылка: https://tailwindcss.com/docs/display

 <div class="table w-full">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">A cell with more content <br></div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 4</div>
      <div class="table-cell">A cell with more content</div>
      <div class="table-cell">Cell 6</div>
    </div>
  </div>
</div>