title: How I can make all my picture be on the same size
body: <p>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 <a href="https://prnt.sc/10qz5vk" rel="nofollow noreferrer">https://prnt.sc/10qz5vk</a> and when I change the state in 1,2,3 or 4 I have
  I want to have <a href="https://prnt.sc/10qyzk0" rel="nofollow noreferrer">here</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from 'react'
  import './Styles/Slide.css'
  import { images } from './sliderojects';
  
  function Slide() {
  
      const [currImage, setCurrImage] = useState(1);
  
      return (
          &lt;div className="slide-exterior"&gt;
              &lt;div className="slide-interior" style={{ backgroundImage: `url(${images[currImage].img})` }}&gt;
                  &lt;img src={images[currImage].img} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      )
  }
  
  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
      },
  ]</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  </div>
  </div>
  </p>