我已经做了很多查找,但关于 reactstrap 轮播图像响应能力的文档出奇地少。
我的 ReactStrap 轮播响应式调整大小,但图像没有。
我研究/尝试过的选项:
在轮播组件本身中通过 className 的 CSS?我认为这可能是最好的,但我还没有找到可以正确调整图像大小的背景大小、高度和最大宽度的组合。
资源集 ?考虑到轮播是一个组件,我不确定如何实现这个或任何其他内联属性
也许轮播组件本身的某个位置?
或者我有更好的修改图片的方法吗?
或者 @media 是通过 css 的答案吗?
`
const items = [
{
src: 'img1.png',
altText: '',
caption: ''
},
{
src: 'img2.png',
altText: '',
caption: 'Freedom Isn\'t Free'
},
{
src: 'img3.png',
altText: '',
caption: ''
}
];
class HomeCarousel extends Component {
constructor(props) {
super(props);
this.state = { activeIndex: 0 };
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
this.onExiting = this.onExiting.bind(this);
this.onExited = this.onExited.bind(this);
}
onExiting() {
this.animating = true;
}
onExited() {
this.animating = false;
}
next() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
this.setState({ activeIndex: nextIndex });
}
previous() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
this.setState({ activeIndex: nextIndex });
}
goToIndex(newIndex) {
if (this.animating) return;
this.setState({ activeIndex: newIndex });
}
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
className="carouselImg"
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<img src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous}
>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
);
}
}
export default HomeCarousel;
`
最佳答案
你好,你好
我已经在我的 reactjs 应用程序中用 Carousel 组件尝试过这个 reactstrap。 我通过添加 bootstrap 4 类“d-block w-100”解决了这个问题。
我在我的 reactstrap Carousel 组件和这个元素中创建了这个
来自这里:
<img src={item.src} alt={item.altText} />
我改为:
<img className="d-block w-100" src={item.src} alt={item.altText} />
我刚刚从 bootstrap 4 文档中复制了这些类 (d-block w-100) https://getbootstrap.com/docs/4.0/components/carousel/
这是我的示例,我将 Reactstrap Carousel 与来 self 的 WordPress Rest API 数据的动态数据一起使用。 https://github.com/jun20/React-JS-and-WP-Rest-API/tree/home-carousel-final
关于css - 配置 Reactstrap 旋转木马图像以响应的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49681769/