Tailwind：如何在导航栏父 div 中放置图像

Posted 2023-03-07

【中文标题】Tailwind：如何在导航栏父 div 中放置图像

【英文标题】：Tailwind: how to fit image inside navbar parent div

【发布时间】：2021-07-05 21:03:34

【问题描述】：

我有一个简单的标题，我想在其中插入个人资料图片。但是，个人资料图片不适合标题，我不确定如何以响应方式处理它。我不想以任何方式硬核图像的宽度/高度，而是希望它始终适合标题的高度，并带有一些填充。

我的代码是：

    <div class="flex flex-wrap items-center justify-start
          m-3 p-2 pl-6  ">
      <span class="title-text light-text text-xl">Some Title</span>
      <span class="pl-10">Some link</span>
      <span class="pl-10">Some link</span>
      <span class="pl-10">Some link</span>
      <span class="pl-10">Some link</span>

      <div class="rounded">
        <img class= "relative rounded-full border
              border-gray-100 shadow-sm
         max-w-max   h-full " src="../../assets/dog.jpeg" />
      </div>
    </div>

如果没有图片，它看起来像这样：

但是有了图像，它看起来像这样：

我希望它看起来如何：

如何使用 Tailwind 实现它？

【参考方案1】：

您可以使用object-fit:cover，注意您必须将img的with和height设置为100%。

.rounded
    display: flex;
    align-items: center;
    justify-content: center;

.rounded img 
    height: 100%;
    width: 100%;
    object-fit: cover;

这里是tailwind-css 的链接，这意味着你只能使用这个类object-cover

  <div class="rounded">
    <img class= "object-cover relative rounded-full border
          border-gray-100 shadow-sm
     max-w-max   h-full " src="../../assets/dog.jpeg" />
  </div>

【讨论】：

img class="object-scale-down" 甚至 img class="object-contain" 怎么样？你能提供一个链接到你的页面吗？可能您需要为您的 img 父级 <div class="rounded"> 设置一个 height。

【参考方案2】：

为导航和图像容器提供固定高度，

<div class="flex flex-wrap items-center justify-start px-4 bg-gray-800 text-white h-20">
  <span class="title-text light-text text-xl">Some Title</span>
  <span class="pl-10">Some link</span>
  <span class="pl-10">Some link</span>
  <span class="pl-10">Some link</span>
  <span class="pl-10">Some link</span>

  <div class="h-16 ml-auto">
    <img class= "rounded-full border border-gray-100 shadow-sm h-full" src="../../assets/dog.jpeg" />
  </div>
</div>