I've been working on making my pictures of varying resolutions the same size here, but no matter what I try, it just doesn't seem to work. Here is what I'm getting: . When I change the state to 1, 2, 3, or 4, I want it to look like this: here
import React, { useState } from 'react'
import './Styles/Slide.css'
import { images } from './sliderojects';
function Slide() {
const [currImage, setCurrImage] = useState(1);
return (
<div className="slide-exterior">
<div className="slide-interior" style={{ backgroundImage: `url(${images[currImage].img})` }}>
<img src={images[currImage].img} />
</div>
</div>
)
}
export default Slide
import room1 from './Media/room1.jpg';
import room2 from './Media/room2.jpg';
import room3 from './Media/room3.jpg';
import room4 from './Media/room4.jpg';
export const images = [
{
title: "Brasov",
subtitle: "This is the beautiful Brasov",
img: room1
},
{
title: "Iasi",
subtitle: "Come check out our city Iasi",
img: room2
},
{
title: "Suceava",
subtitle: "The heart of Bucovina - Suceava",
img: room3
},
{
title: "Bucharest",
subtitle: "Here you can see the biggest place in Romania",
img: room4
},
].slide-exterior{
width: 70%;
height: 500px;
margin:auto;
object-fit: cover;
background-color: black;
margin-top:20px;
}
.slide-interior{
width: 100%;
height: 500px;
object-fit: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}