CSS - 具有固定高度和宽度的元素 - 当父级小于元素时缩小

Question

是否可以设置元素的height 和width，并在父height 小于子height 时使其缩小？

我有一个可重复使用的图标按钮组件，我希望它有一个特定的height 和width，因为它是一个正方形。 但是当在输入元素中使用时，我希望它缩小，因此它只会使用输入元素的可用空间/高度。

这里有一点demo。

svg {
  width: 1em;
  height: 1em;
}

<script src="https://cdn.tailwindcss.com"></script>


<div class="bg-green-200 h-screen p-4 flex flex-col gap-4 items-start">
  <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>

  <div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
    <input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
    <div class="flex items-center justify-center children:any-h-full h-full text-2xl">
      <div class="flex items-center gap-1 text-gray-400">
        <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
        ><span
          ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
        ></span>
      </div>
    </div>
  </div>
</div>

我设法让它为height 工作，但现在width 是我在输入元素中使用它时的问题。我尝试使用max-width 设置它，但没有成功，我现在有点卡住了。

提前致谢！！

Answer 1

您可以使用新的 css 属性“aspect-ratio”，并将其设置为“1/1”，它会保持比例尺寸，而元素的宽度或高度会根据其容器而变化。

查看css-tricks了解更多详情。

Answer 2

要扩展现有答案，您要在其上设置固定宽度，但您需要根据 纵横比 考虑此元素的尺寸，在您的情况下为 @987654327 @。定义它的一种方法是使用 Tailwind 的 utilities for the aspect-ratio property。您需要确保将h-full 一直传播到您的元素，以便最终在该元素上设置h-full 有任何效果。

您需要进行的实际更改是：

1. 将 h-full 添加到包裹第二个关闭按钮的 Flex 容器中，这将使该按钮上的 h-full 生效
2. 从两个关闭按钮中删除 w-16，因为您希望宽度取决于高度
3. 改为添加aspect-square，这将使宽度与高度相同

如果您不接受aspect-ratio's browser support，另一种方法是使用@tailwindcss/aspect-ratio 插件提供的padding hack。

Answer 3

您可以对height and width 使用“100%”而不是使用固定值，而对max-height 和max-width 使用固定像素值。这样孩子就不会比父母大，但也不会大于定义的最大值。

Answer 4

感谢 Ala Mouhamed 和 silvenon 的投入，我设法通过使用 aspect-ratio 和固定高度让它工作。在输入字段中使用它时，我只需将h-auto 传递给图标按钮并覆盖固定高度。这样它将调整到输入的高度 -> Tailwind Play Demo

svg {
  width: 1em;
  height: 1em;
}

<script src="https://cdn.tailwindcss.com"></script>


<div class="bg-green-200 h-screen p-4 space-y-4">
  <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 aspect-square bg-white hover:bg-green-50 text-gray-400">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>

  <div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
    <input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
    <div class="flex items-center justify-center children:any-h-full h-full text-2xl">
      <div class="flex items-center gap-1 text-gray-400">
        <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 h-auto aspect-square bg-white hover:bg-green-50 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
        ><span
          ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
        ></span>
      </div>
    </div>
  </div>
</div>
</div>