Images are mobile responsive but are not responsive on Desktop

user_17630524 0
Viewed 38

I am using React components and have been trying to make a carousel with 3 images but the issue is it's responsive on mobile but as soon as I view it on my desktop, the images look almost stretched out, for example I have an image of an a sunny-side-up egg toast, and it looks good on my 'responsive' settings under dev tools but if i expand on my desktop I can mostly see the egg yolk.

Here is my CSS. and any help appreciated!

* {
  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;
}

Here is my 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;
reactjs css
2 Answers

The problem is you aren't choosing one axis to scale your image. If you scale with both it ignore the original images ratio and does what you ask making it 50vw by 50vh. In this case width is going to be the more useful axis (i think) .

The problem is probably here in this css selector:

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

either use just:

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

or just use:

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

also in your root tag change the value of width (or height accordingly in view port lengths):

:root {
  --widths: 75vw;
}

If none of this works show me the jsx, im working in the dark here guessing what these classes mean

user_149148170

I think the problem is object-fit:cover because this stretches the image to fit in the parent element.

user_172326570
Related