根据内容动态改变 div 的形状和大小

Question

我有一个div 元素，它的形状和大小应该与其icon 内容完全相同。 我正在 Angular 9 中设计一个 component，它是一个可以将您导航到上一页的按钮。我希望这个组件是可重用的，所以它里面的图标元素必须是可变的。我通过Angular的内容投影轻松实现了这一点，但问题是div外部容器实际上比它的内容大，导致图标区域被真正的“可点击”区域溢出。

这是html页面

<div class="back-button-container clickable" (click)="navigateBack()">
    <ng-content select="[icon]"></ng-content>
</div>

如果没有内容投影，html 页面将如下所示（我认为我的问题超出了 Angular 内容投影）

<div class="back-button-container clickable" (click)="navigateBack()">
    <i icon class="far fa-2x fa-arrow-alt-circle-left" ></i>
</div>

display: inline-block，正如建议的here，不起作用。

Answer 1

至于 css - 测试如何修复它

div{
height: auto;           /* it is by default - if wasn't changed not needed */ 
width: auto;            /* it is by default - if wasn't changed not needed */
padding: 0;             /* a space around the interior of the element*/
display: inline-block;  /* by default is block - takes up the full width */
}
i{
display: block;     /* takes up the full width of parent */
margin: 0;          /* you know what it is */
border: 0;          /* if you need border - set it, but don't let the user agent do it */
width: 120px;       /* not 120 but explicit how many px */
height: 120px       /* not 120 but explicit how many px */
}

终于用Validatorw3c

---

更新
我假设图标表示图像，最佳做法是设置固定大小，因为浏览器不需要猜测并且在加载时不会跳转。
如果它的大小发生变化

i{
height: 100%;   /* or 10vh as 10% of devices screen */
width: auto;    /* if the image isn't square it won't be deformed */
}

如果由于任何原因大小无法预测 - 让它跳跃吧:)

还有一件事——如果有任何浮动或弹性，那可能没那么容易。