添加100％宽度的Nuka滑块可以拉伸我的图像

Question

我有一个带有六张图像的旋转木马，使用Nuka Carousel无限运行 当我看到页面上的图像时，它们会在宽度上拉伸。在查看控制台后，我发现nuka滑块类为图像增加了100％的宽度，并禁用它来修复图像。

.slider-slide > img {
    width: 100%;
    display: block;
}

有没有办法禁用宽度，这样图像就不会被拉伸？

Answer 1

我的解决方案如下。图像不会全屏拉伸。

img.your-class-name {
  background-repeat: no-repeat;
  min-width: 100%;
  width: 100%;
  height: 100%;
}

Answer 2

我也有这个年龄了。真令人沮丧。我正在使用情感和CSS Grid。因此，在我的情况下，我首先通过执行以下操作确保演示正常工作：

1. 为滑块创建组件

2. 按原样在组件内部设置演示代码

3. 转换CSS-以我为例：从“ react-emotion”导入{css}，然后将style = {{标签转换为className = {css`

4. 使用％vw添加基于视口的限制；在我的情况下，我的侧面有5％的沟槽，所以我限制为90vw（视口的90％），如下所示：

 <div className={css`
  width: 90vw;
  margin: auto;
 `}>
  
  <Carousel>
    // demo code
  </Carousel>

根据您的lib和周围的CSS，您将需要更改此方法。我基本上可以确保使用同一工具同时处理所有CSS，因此不会以某种奇怪的顺序进行编译。然后，我限制了包含轮播的div宽度。这是抽搐的AF-我通过添加无关的CSS多次将其打破-我使用的情感是CSS的前缀，所以这没有任何意义，但是，嘿，这就是CSS的乐趣。