2

I am currently making a website and I wish for the image to zoom in when resizing the browser window.

.image1 {
  width: 100%;
  height: 300px;
}
<div class="bookingtest">
  <div class="imgTESTBooki">
    <img class="image1" src="images/steering-wheel-2927406_960_720.jpg" alt="">
  </div>
  <div class="txtTESTBooki">
    <!-- <p>Book a test</p> -->
    <a href="bookingtest.html" class="Mbutton">Book a test</a>
  </div>
</div>

I would like the image to either zoom in or out of the picture depending on how the browser window is resized. I am particular stumped, since I do not know where to look next in order to have a cleaner image on the website, while resizing the window.

HALF WIDTH OF MONITOR

A squashed image of a man on the steering wheel, When the screen is half the monitor width

FULL WIDTH OF MONITOR

A stretched image of a man on the steering wheel, when the screen is the full monitor width

Morpheus
  • 8,829
  • 13
  • 51
  • 77
Ron
  • 41
  • 3
  • 8
  • 1
    You're saying zoom but you're describing and showing stretch / (non uniform) scale... [Maybe try googling with the correct terms](https://www.google.com/search?q=html+css+stretch+image+to+fit+div)? – RobIII Aug 31 '18 at 00:47
  • You have to keep your css height and width using percentages and not absolute values, otherwise this will always happen. A trick I use to have one side be specific is to wrap the thing in another div and set only height or width for that outer div. Then you'll have the other side adjust automatically to the same scale as the fixed side. – Iskandar Reza Aug 31 '18 at 00:54

1 Answers1

0

Just add responsiveness to your image through CSS:

.image1 {
width: 100%;
height: auto;

}

samu101108
  • 675
  • 7
  • 23