CODEWITHSUNDEEP
javascripthtmlcsswidthzooming
leisinger
leisinger

Reputation: 11

html css - full size image and view can be zoomed

I would like to have a html css solution for a website with only one picture . I have the following requirements:

  1. If you open the website with any browser, then the width of the picture = the width of browser window
  2. You can zoom in the picture

I have solution where I get the size of the browser window by a js by using window.screen.width * window.devicePixelRatio see Link, but it dosen't work for all devices. If I'am using something like that, I can not zoom in:

<img style="width:100%;" src="https://images8.alphacoders.com/712/712496.jpg">

Is there a css solution or a js solution without getting the width in pixels that works for all devices and browsers?

Upvotes: 1

Views: 1743

Answers (1)

humble_barnacle
humble_barnacle

Reputation: 490

You can use the checkbox type input to see whether the user has clicked or not. When the user clicks, the checkbox goes into checked state and hence we can use the following pure CSS solution. The unit of width used here is 'vw' (means viewport-width) which is basically the width of the client viewing window.

*{
  margin: 0;
}

img{
  width: 100vw;
}

.toggle{
  position: fixed;
  height:100%;
  width: 100%;
  z-index: 2;
  opacity: 0;
}
     
.toggle:checked+img{
  width: 200vw;
}
<input type=checkbox class="toggle">
<img src="https://images8.alphacoders.com/712/712496.jpg">

Hope this works :)

Upvotes: 1

Related Questions