Я хочу, чтобы мои изображения заполняли div без использования фонового изображения. Обрезайте его при необходимости, а не растягивайте. Прямо сейчас это срабатывает ... иногда. Но когда вы уменьшаете представление до мобильного представления (когда строки длиннее изображения, изображение не заполняет div, пустые места сверху и снизу)

<div class="flex bg-red-500">
  <div class="overflow-hidden block flex-shrink-0 w-1/3">
    <img class="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2017/05/what-is-a-stock-story-770x375.jpg">
  </div>
  <div>
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>
0
jordansmith 12 Окт 2021 в 00:09

3 ответа

Лучший ответ

Поскольку вы используете tailwindCSS, используйте следующие классы в теге img, чтобы выполнить ваш запрос.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-red-500 text-white">
  <div class="overflow-hidden block flex-shrink-0 w-1/3">
    <img class="h-full w-full object-cover" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2017/05/what-is-a-stock-story-770x375.jpg">
  </div>
  <div class="mx-2">
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>
0
Alvison Hunter 11 Окт 2021 в 21:45

Если вы сделаете изображение полной шириной и полной высотой с помощью блока отображения, вы можете использовать свойство object-fit: cover.

Это заставит ваше изображение покрыть все пространство.

0
helrabelo 11 Окт 2021 в 21:25

Ты можешь сделать

<div class="flex bg-red-500">
  <div class="overflow-hidden block flex-shrink-0 w-1/3">
    <img style='height: 100%; width: 100%; object-fit: cover' src='https://www.nerdwallet.com/assets/blog/wp-content/uploads/2017/05/what-is-a-stock-story-770x375.jpg'/>
  </div>
  <div>
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div> 

0
deirdreamuel 11 Окт 2021 в 21:33