Попутный ветер/CSS: почему мой div не соответствует ширине изображения, а расширяется до большей ширины?
Мой div (выделен желтым фоном) расширяется по горизонтали, т. е. его ширина увеличивается. Я думаю, что он увеличивается до полной ширины изображения, т. е. до 800 пикселей + отступы. Как я могу убедиться, что ширина и высота этого div равна уменьшенному изображению? Чтобы следующий элемент с текстом «Тест» отображался рядом с ним. Спасибо!
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "flex max-h-96">
<div class = "flex w-fit bg-yellow-100 p-2">
<img src = "https://placehold.co/800x1000" alt = "MAIN_IMAGE" />
</div>
<div>Test</div>
</div>@cloned, к сожалению, это изображение является частью другого компонента angular с некоторыми селекторами изображений, и мне нужно создать отдельный компонент, который будет содержать множество деталей продукта, кнопок и т. д., который будет отображаться рядом с изображением. Если возможно, я хотел бы предпочесть один компонент для селектора изображений и один отдельный для отображения деталей, кнопок и т. д. логики.
Ответы 1
Я думаю, что проблема m-h в попутном ветре. Установите его высоту, а не максимальную высоту. Также убедитесь, что изображение и родительское изображение занимают полную высоту каждого из своих родителей.
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "flex h-96"> <!-- don't use max height -->
<div class = "bg-yellow-100 h-full p-2"> <!-- let this element take the full height of its parent -->
<img class = "h-full" src = "https://placehold.co/800x1000" alt = "MAIN_IMAGE" /> <!-- and this one too -->
</div>
<div>Test</div>
</div>
Почему бы не разместить текст рядом с изображением?
<img src = "..."> Test