影像是移動回應的，但在桌面上沒有回應

我正在使用 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;

uj5u.com熱心網友回復：

問題是您沒有選擇一個軸來縮放影像。如果同時縮放，它會忽略原始影像比例，并按照您的要求將其設為 50vw x 50vh。在這種情況下，寬度將是更有用的軸（我認為）。

問題可能出在這個 css 選擇器中：

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

要么只使用：

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

或者只是使用：

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

同樣在您的根標簽中更改寬度的值（或相應的視口長度中的高度）：

:root {
  --widths: 75vw;
}

如果這些作業都沒有向我展示 jsx，我在黑暗中作業，猜測這些類的含義

uj5u.com熱心網友回復：

我認為問題 object-fit:cover在于這會拉伸影像以適應父元素。

標籤：

上一篇：如果父div具有特定的類，則使用JS切換另一個div

下一篇：如何在大寫和小寫字母之間更改文本大小？