CODEWITHSUNDEEP
htmlcssresponsive-design
strangeQuirks
strangeQuirks

Reputation: 5910

Image not scalable on mobile

I have this image that you can enlarge in mobile view:

enter image description here

However the user can't pinch-zoom/move around to see the image outside of the viewport.

Does anyone have a suggestion to fix this?

Here is the page to test: https://offsideornot.com/offside/west-bromwich-albion-vs-southamption_WfPbYBUvZlhDPvN4lp1x

I thought adding user-scalable=yes here <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/> would help but it doesnt.

Upvotes: 0

Views: 85

Answers (1)

A Haworth
A Haworth

Reputation: 36426

The simplest example I can think of is to let the image take its 'natural' dimensions but have it in a container that is smaller - i.e. don't do any of the normal things like have object-fit: cover or contain. In that way the user can get the best definition that is available, can move the image within its container and can zoom.

Of course, for the actual webpage, without the user interacting with the image, you may want more of the image to show in the 'static' state. I don't know exactly what the requirement is. On a small device perhaps giving the user the option of using the whole screen to view the image (before zooming it) might be possible as this use (spot the ball) needs as clear definition as possible.

Here's the simple snippet to get things started:

.container {
  width: 300px;
  height: 200px;
  overflow: auto;
  margin: 50px;
}
img {
  position: relative;
}
<div class="container">
  <img src="https://i.sstatic.net/RxX4s.jpg" />
</div>

Upvotes: 1

Related Questions