Angular带边框分组图片问题：div影响尺寸ng-container无法加边框

我来帮你搞定这个问题！你遇到的核心矛盾很清晰：div作为块级元素，默认布局特性会改变内容尺寸；而ng-container是虚拟DOM元素，不会被渲染到页面，自然没法加边框样式。下面给你两种实用的解决方案：

方案1：给div添加布局重置CSS #

既然div会改变尺寸，我们只需要修改它的默认布局行为，让它完全贴合内部图片的尺寸即可。给div设置display: inline-block，同时清除默认的内外边距，这样它就只会包裹图片内容，不会额外占用空间，还能正常添加边框样式。

修改后的代码示例：

<div 
  *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel"
  class="comp-channel-group"
>
  <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
  <img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}" width="100" height="100">
</div>
<div #noCompChannel>
  <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</div>

对应的CSS类（推荐抽离到样式文件，不要用内联样式）：

.comp-channel-group {
  display: inline-block; /* 让div贴合内容宽度 */
  margin: 0;
  padding: 0;
  border: 2px solid #666; /* 自定义你的边框样式 */
}

方案2：用span替代div配合ng-container #

如果你更习惯用ng-container做条件判断，可以在它内部嵌套一个span元素。span默认是行内元素，不会改变图片的布局，设置display: inline-block后就能支持边框样式，完美适配你的需求。

代码示例：

<ng-container *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
  <span class="comp-channel-group">
    <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
    <img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}" width="100" height="100">
  </span>
</ng-container>
<ng-template #noCompChannel>
  <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</ng-template>

同样使用上面定义的.comp-channel-group CSS类即可。

这两种方案都能同时满足保持图片原始尺寸和给组合频道添加边框分组的需求，你可以根据自己的代码习惯选择其中一种~

内容的提问来源于stack exchange，提问作者Sumchans