react-slideshow-image组件内如何让图片适配外层div并实现响应式

解决方案 #

之前配置不生效是因为react-slideshow-image组件自动生成的多层嵌套div默认没有继承外层高度，且组件自带样式优先级更高，按以下步骤修改即可：

1. 给Slide组件传入cssClass自定义类名，修改JSX代码：

return (
      <div className="App">
        <div style={{ width: "30%", height: "70px" }}>
          <Slide ref={this.slideRef} {...properties} cssClass="custom-slide-wrapper">
            {slideImages.map((each, index) => (
                <img style={{ objectFit: 'contain', height : '100%', width: '100%' }} src={each} key={index} alt="sample" />
            ))}
          </Slide>
        </div>
      </div>
)

2. 新增CSS规则覆盖组件默认样式，强制所有嵌套层级继承外层高度：

.custom-slide-wrapper,
.custom-slide-wrapper > div,
.custom-slide-wrapper .each-slide,
.custom-slide-wrapper .each-slide > div {
  height: 100% !important;
}

响应式适配调整 #

如果需要外层容器实现响应式，无需固定写死70px高度，可给外层div设置aspect-ratio指定宽高比，高度会自动跟随宽度变化，内部图片也会同步适配：

/* 外层容器样式示例，宽高比16:9 */
.slide-container {
  width: 30%;
  aspect-ratio: 16/9;
}

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