图像具有移动响应功能，但在桌面上没有响应功能

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乘50vh。在这种情况下，宽度将是更有用的轴(我认为(。

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

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

要么只使用：

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

或者只使用：

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

也在根标记中更改宽度值(或视图端口长度中相应的高度(：

:root {
--widths: 75vw;
}

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

Answer 2

我认为问题是CCD_ 1，因为这将拉伸图像以适应父元素。