图像是移动响应的，但在桌面上没有响应

Question

我正在使用 React 组件，并且一直在尝试制作带有 3 张图片的轮播，但问题是它在移动设备上具有响应性，但是当我在桌面上查看它时，图片看起来几乎被拉长了，例如我有一个一个阳光面朝上的鸡蛋吐司的图像，它在我的开发工具下的“响应式”设置中看起来不错，但如果我在桌面上展开，我几乎可以看到蛋黄。

这是我的 CSS。并感谢任何帮助！

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --heights: 50vh;
  --widths: 100%;
}

.slider-container {
  height: var(--heights);
  width: var(--widths);
  position: relative;
  margin: auto;
  overflow: hidden;
}

.active {
  display: inline-block;
}

.inactive {
  display: none;
}

.slides {
  height: var(--heights);
  width: var(--widths);
}

.slide-image {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.slide-text {
  width: 100%;
  height: 100%;
  color: white;
  font-size: 50px;
  position: absolute;
  text-align: center;
  top: 40%;
  z-index: 10;
}

.slide-text {
  top: 35%;
  font-size: 2rem;
}

.prev,
.next {
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1rem;
  margin-top: -3rem;
  font-size: 40px;
  font-weight: bold;
  border-radius: 0px 5px 5px 0px;
}

.prev:hover,
.next:hover {
  color: #84a98c;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 0.5s ease-in;
}

.next {
  right: 0;
  border-radius: 5px 0px 0px 5px;
}

.all-dots {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  top: 85%;
  justify-content: center;
  z-index: 200;
}

.dot {
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
  margin: 0px 3px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
}

.active-dot,
.dot:hover {
  background-color: #84a98c;
}

这是我的 JSX

const len = sliderImage.length - 1;

const Slider = (props) => {
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveIndex(activeIndex === len ? 0 : activeIndex + 1);
    }, 5000);
    return () => clearInterval(interval);
  }, [activeIndex]);

  return (
    <div className="slider-container">
      <SliderContent activeIndex={activeIndex} sliderImage={sliderImage} />
      <Arrows
        prevSlide={() =>
          setActiveIndex(activeIndex < 1 ? len : activeIndex - 1)
        }
        nextSlide={() =>
          setActiveIndex(activeIndex === len ? 0 : activeIndex + 1)
        }
      />
      <Dots
        activeIndex={activeIndex}
        sliderImage={sliderImage}
        onclick={(activeIndex) => setActiveIndex(activeIndex)}
      />
    </div>
  );
};

export default Slider;

Answer 1

问题是您没有选择一个轴来缩放图像。如果你同时缩放它忽略原始图像比例并按照你的要求将其设为 50vw x 50vh。在这种情况下，宽度将是更有用的轴（我认为）。

问题可能出在这个 css 选择器中：

.slides {
  height: var(--heights);
  width: var(--widths);
}

要么只使用：

.slides {
    width: var(--widths);
}

或者直接使用：

.slides {
  height: var(--heights);
}

也在你的根标签中改变宽度的值（或相应的视口长度的高度）：

:root {
  --widths: 75vw;
}

如果这些工作都没有向我展示 jsx，我在黑暗中工作，猜测这些类的含义

Answer 2

我认为问题是 object-fit:cover 因为这会拉伸图像以适应父元素。