I'm trying to have my pictures witch have different resolution the same size here and I tried a loot of things and I don't know why it doesn't work . Here is the result for me https://prnt.sc/10qz5vk and when I change the state in 1,2,3 or 4 I have I want to have 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 beatiful Brasov",
img: room1
},
{
title: "Iasi",
subtitle: "Come to check our city Iasi",
img: room2
},
{
title: "Suceava",
subtitle: "The haert of Bucovina - Suceava",
img: room3
},
{
title: "Bucuresti",
subtitle: "Here you can see the biggest place is 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;
}