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

我有一个

div

元素，它的形状和大小应该与其

图标

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

这是html页面

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

如果没有内容投影，html页面将是这样的（我认为我的问题超出了角度内容投影）

---

显示：内联块

，正如建议的那样，不起作用。

至于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 */
}

最后使用w3c

---

更新
我假设图标意味着图像，最好的做法是设置固定的大小，因为浏览器不需要猜测，加载时也不会跳转。
如果它的大小改变

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

如果由于任何原因，尺寸不可预测，让它跳跃：）

---

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

谢谢。但如果我无法明确显示图标的高度和宽度，该怎么办？这是一个很好的解决方案，使用100%纯

html

和

css

。然而，对于那些想要快速解决纯角度问题的人，

HostListener

装饰者可以做到这一点。事实上，它允许您直接在父模板中捕获有关投影内容的事件。我建议您查看[链接此]（）

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