代码之家 › 专栏 › 技术社区 › parsecer

顺风:如何在导航栏父div中调整图像

tailwind-css css

parsecer · 技术社区 · 5 年前

我有一个简单的标题,我想在其中插入一个配置文件图像。然而,配置文件图像不适合标题,我不知道如何以响应的方式接近它。我不想以任何方式硬核化图像的宽度/高度,而是希望它始终适合页眉的高度,并带有一些填充物。

我的代码是:

    <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>

如果没有图像,它看起来是这样的:

但对于图像,它看起来是这样的:

但我希望它看起来:

我如何利用顺风实现它?

0 回复 | 直到 5 年前

Gildas.Tambo 5 年前

你可以用 object-fit :cover,请注意,您必须将带和img高度设置为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>

Darpan Kulkarni 5 年前

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

<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>

推荐文章

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

Unik6065 · 使用Vite在Laravel中覆盖默认顺风颜色的问题

1 年前

Reagan · 使用tailwind CLI在我的PHP项目中添加tailwind不会在frotand中显示样式。output.css为空或图标正确

1 年前

new221 · 应用顺风前缀时,画布上的preline ui不起作用

1 年前

Edward B. · 使用Tailwind Css制作一个包含子菜单的菜单,子菜单周围有连续的边框

1 年前

foO · 如何使用动态条件设置活动链接文本颜色

1 年前