title: Media Queries to Change Image
body: <p>I am designing a website which works on desktops and mobile devices, using <a href="https://www.w3schools.com/css/css_rwd_mediaqueries.asp" rel="nofollow noreferrer">media queries</a>. For the most part, this is working fine. However, I have a scenario which I will attempt to describe below, which is not working properly. </p>
  
  <p>On a desktop, I have a series of images with text overlay, arranged as so:</p>
  
  <p><a href="https://i.stack.imgur.com/rsEfX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rsEfX.png" alt="desktop plan"></a></p>
  
  <p>On a mobile, I would like this displayed in two columns with the final tile being spread across the full width, as so:</p>
  
  <p><a href="https://i.stack.imgur.com/D7HCf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D7HCf.png" alt="mobile plan"></a></p>
  
  <p>However, the image I use for the final tile on the desktop is square, and when I spread it across the full width, it is way too big and looks more like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lpd2C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lpd2C.png" alt="mobile actual"></a></p>
  
  <p>Below is the HTML and CSS that I have at the moment:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="hotel_container"&gt;
          &lt;div class="options"&gt;
              &lt;div class="option"&gt;
                  &lt;a href="www.example.com" target="_blank"&gt;&lt;img class="opt_img" src="images/example.jpg"&gt;&lt;/a&gt;
                  &lt;h3 class="centered" id="hotel_info"&gt;TEXT&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- repeated "options" div 7 more times --&gt;
          &lt;div class="options_last"&gt;
              &lt;div class="option"&gt;
                  &lt;a href="www.example.com" target="_blank"&gt;&lt;img class="opt_img" src="images/example2.jpg"&gt;&lt;/a&gt;
                  &lt;h3 class="centered" id="hotel_info"&gt;TEXT&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.options, .options_last{
      width: 33%;
      overflow: hidden;
      display: inline-block;
  }
  
  @media only screen and (max-width: 812px) {
      .options{
          width: 50%;
      }
  }
  
  @media only screen and (max-width: 812px) {
      .options_last{
          width: 100%;
      }
  }
  
  .option{
      position: relative;
      text-align: center;
      padding: 10px;
  }
  
  @media only screen and (max-width: 812px) {
      .option{
          padding: 1px;
      }
  }
  
  .opt_img{
      width: 100%;
      opacity: 0.7;
  }
  
  .opt_img:hover{
      opacity: 0.9;
  }
  
  .centered {
      position: absolute;
      width: 100%;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  #hotel_info{
      background-color: rgba(130, 130, 130,0.7);
      width: 80%;
      font-size: 23px;
      padding: 15px;
  }
  
  @media only screen and (max-width: 812px) {
      #hotel_info{
          width: 60%;
          font-size: 10px;
          padding: 5px;
      }
  }
  </code></pre>
  
  <p>I do not want to force the image to be a certain height as this would distort it, so instead I thought I could have a second image, which is rectangular, which I could switch in when on mobile. However, I cannot for the life of me work out how to select a different picture based on the device, as I would with a traditional media query.</p>
  
  <p>[Edit: I am aware of the ability to have both images on the page and hide one or the other with media queries but have been warned that this can slow pages down if overused as all devices have to load all the images. I am looking for a 'better' way to do this, to avoid picking up bad habits while I'm learning on something small scale]</p>
  
  <p>Can someone give me a hand, or point me towards a simple explanation online that may help me figure this out please.</p>
  
  <hr>
  
  <p>P.S. I am very new to web development so please make your answers beginner friendly, and bear with me if I have to ask for clarification. I am also open to suggestions of better or simpler ways of doing things, I am working with what I have learnt from the Codecademy courses on web development.</p>