如何将自定义Angular图片滑块设为全屏宽度并按比例适配高度

步骤1：修改父组件的容器样式 #

去掉原容器的固定宽高与居中样式，改用基于宽度的内边距维持宽高比，同时设置宽度为100%：

<div style="width: 100%; position: relative;">
  <!-- 用padding-top实现宽高比，16:9比例对应56.25%（9÷16=0.5625），可根据你的图片比例调整 -->
  <div style="padding-top: 56.25%;"></div>
  <image-slider [slides]="slides" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></image-slider>
</div>

如果要更规范，可把样式写到CSS文件中：

.slider-container {
  width: 100%;
  position: relative;
}
.slider-container .ratio-placeholder {
  padding-top: 56.25%; /* 4:3比例可改为75%，根据需求调整 */
}
.slider-container image-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

对应模板写法：

<div class="slider-container">
  <div class="ratio-placeholder"></div>
  <image-slider [slides]="slides"></image-slider>
</div>

步骤2：调整imageSlider.component.css的样式 #

修改.slider和.slide的样式，让它们完全填充父容器，若不需要圆角可直接移除：

.slide {
  width: 100%;
  height: 100%;
  /* 不需要圆角可删除此行 */
  /* border-radius: 10px; */
  background-size: cover;
  background-position: center;
}

.slider {
  position: relative;
  height: 100%; /* 保持此设置，让滑块填充父容器高度 */
  width: 100%; /* 新增，确保滑块宽度占满容器 */
}

原理说明 #

CSS中内边距的百分比是基于元素宽度计算的，通过padding-top: 百分比的方式，能实现宽度变化时高度自动按比例调整，完美匹配图片的宽高比。再通过绝对定位让滑块覆盖在占位容器上，即可实现全屏宽度且自适应高度的效果。

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