Html 当div位于flexbox中时，如何使div的宽度与高度相同

发布于08月31日

我有一个标题栏，上面有通常的内容.应用程序-徽标，导航，一些控制.

导航栏的高度不是设置的，而是由其内容决定的.它是一个弹性容器.

现在我希望App-Logo延伸到垂直可用空间，并保持其纵横比.

下面是它应该是什么样子:

下面是实现上图的代码:

.headerbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  aspect-ratio: 1 / 1; /* Not working */

  border-radius: 5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}

<div class="headerbar">
  <div class="logo"></div>
  <p>Link 1</p>
  <p>Link 2</p>
  <p>Link 3</p>
</div>

代码链接:https://jsfiddle.net/v2ta54eg/19/

如您所见，徽标是不可见的.正如预期的那样，它似乎只是拉伸自身，但aspect-ratio属性对宽度没有任何影响.宽度保持为0.

try 使用的是aspect-ratio: 1 / 1，我希望它将宽度设置为与高度相同的量.这是因为高度设置为aling-self: stretch.

所以问题是:

如何才能使div具有与高度相同的宽度，从flex父元素align-items: stretch/align-self: stretch中获取高度？

article { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .headerbar { display: flex; padding: .5rem; background: #f0f0f0; border-bottom: 1px solid gray; } .logo { aspect-ratio: 1; height: 100%; border-radius: 5px; background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%); } .links { display: flex; gap: 1em; padding: 10px; flex: 1 0 0; }

Html 当div位于flexbox中时，如何使div的宽度与高度相同

推荐答案

Html相关问答推荐

试图让三个Divs与下面的另外三个对齐

需要关于HTML的建议

如何在将文本垂直居中的同时将文本右对齐？

窗口视图之外的下拉菜单位置

未在抖动中播放的HTML音频｜｜文本正在工作其他标记正在播放，但音频未播放

在Hero部分中同时zoom 背景图像和形状的问题

Django HTML标记-Merge for Loop with Conditional语句

如何使单选按钮在被 Select /选中时看起来像这样的设计？

为什么我的网页显示网格区域彼此相邻，而不是我设置它们的方式？

在 html 和 css 中绘制表格内的倾斜线

如何将元素均匀分布到容器的边缘？

如何并排放置部分？

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列？

奇怪的幻影 div 命名为

文本溢出：省略号不适用于 flexbox

为四开本网站主页添加背景图片

如何创建带有偏移边框线的双色边框？

当我希望它只横向滚动时，可滚动菜单也会上下移动

CSS：如何在模糊的背景上剪切文本？

尽管设置了 width：100% left：0，但居中对齐的 CSS 动画并不对称