BLOG
ARTICLE

Image Overflow in Mobile Devices

2 min read

When we design a website under 'mobile-first' principle, we always have to put extra care for images. Typically we do full-bleed images (no side margins) to maximize space usage, as I employed the technique in my photography website blog post page.

But what if the image contains some instructions that you might need to see in detail?

You could punch to zoom out using your fingers, yes, but that requires an extra movement, and you have to zoom in to return the scale to its original state.

How about this image below?

Note: Tapping on the image will only work on mobile. On desktop, by default, it's not clickable. Try using Chrome Inspect to use mobile emulator instead.

Tap to enlarge this image 👇
Gas tanks at the local gas company

Simple right? You tap it to make the image bigger and tap again to make it smaller.

So how to achieve this?

On React

I love how easy it is to implement this functionality with React hooks. Here's how I did the image above (and all the images in this website's blog posts):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { useState } from 'react';
import styled from 'styled-components';

// Define ImageLabel & PostImage components here
// I used styled-components for this occasion, but you can use anything
const ImageLabel = styled.div`
    width: fit-content;

    margin-top: 1em;
    padding: 5px;
    border-radius: 5px;

    text-align: left;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 13px;

    // Show only for mobile 
    @media (min-width: 768px) {
        display: none;
    }
`

const PostImage = styled.div`
    & > div {
        display: flex;
        flex-flow: column nowrap;
    }

    @media (max-width: 767px) {
        .fullSize {
            max-width: 300vw;
            height: auto;

            overflow-wrap: normal;
            overflow: auto;
            transition: height 0.5s;
        }
    }
`

const Component = ({ ...props }) => {
    const [fullSize, setFullSize] = useState();
    const handleClick = () => {
        setFullSize(!fullSize);
    };

    return (
        <>
            <ImageLabel>
                {fullSize ?
                    `Tap to shrink this image 👇`
                    :
                    `Tap to enlarge this image 👇`
                }
            </ImageLabel>
            <PostImage className="blogImage" style={{ marginBottom: "2em" }}>
                <div>
                    <img
                        className={fullSize ? "fullSize" : null}
                        {...props}
                        onClick={handleClick}
                        loading="lazy"
                    />
                </div>
            </PostImage>
        </>
    )
}

export default Component;
Jerfareza Daviano

Hi, I'm Jerfareza
Daviano 👋🏼

Hi, I'm Jerfareza Daviano 👋🏼

I'm a Full Stack Developer from Indonesia currently based in Japan.

Passionate in software development, I write my thoughts and experiments into this personal blog.