CSS

Question

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

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

这是其中的一小部分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 属性 "纵横比"，并将其设置为 "1/1" ，它会保持比例尺寸，而元素的宽度或高度会根据它的容器。

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

Answer 2

您可以为 height and width 使用“100%”，为 max-height 和 max-width 使用固定像素值，而不是使用固定值。这样 child 就不会比 parent 大，但也不会比 max-values 定义的大。

Answer 3

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

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

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

如果aspect-ratio's browser support isn't acceptable to you, the alternative is to use the padding hack provided by the @tailwindcss/aspect-ratio插件。

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>

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

CSS - element with fixed height and width - shrink when parent is smaller than element

tailwind-css