【Episode 057】Solve the Problem of Images Being Too Large on Smartphones! Responsive Optimization of OGP Thumbnails and Management Console #AI - Qiita
@Waipe(waipe)

【Episode 057】Solving the Problem of Oversized Images on Smartphones! Responsive Optimization of OGP Thumbnails and the Admin Console

    Bulletin Board
  • Thread Float
  • AI
  • Vibe Coding
  • Chatbot
0
Posted at 2026-11-09

Hello! This is the 57th installment of the development log for the 2channel-compatible bulletin board system “Tsuwai Channel (2ch.biz).”

The OGP display styles introduced in Episode 56, which can be selected to suit your preferences (blog card / quote-post style / text).
They were well received even among veteran text-first advocates, who remarked, “The quote-post style doesn’t ruin the 2ch atmosphere!”

However, on the night of the release, users browsing threads on their smartphones sent in reports accompanied by screenshots and cries of outrage.

“When I opened a news thread on my smartphone, the OGP image had ballooned to roughly twice the screen width and was spilling out of the screen! It caused horizontal scrolling, so I couldn’t read the text! The screen was shaking wildly from side to side!”

The smartphone’s screen width (about 375–400 px) was easily exceeded, and the full-HD OGP cover image, which was over 1,200 px wide, was wildly out of control at its original size.

This time, we’ll expose “the trap lurking in the browser’s default values (default behavior)” and bring you the construction record of a fully fortified responsive CSS solution that guarantees the layout will never break, no matter what aspect ratio the image has!

1. Why did the image become enormous and break the layout?

When we investigated the cause, we found that it was an accident caused by the browser behaving exactly as specified, brought about by “the omission of just two CSS property declarations.”

The Two Technical Causes Identified

  1. The container’s height was auto :
    • Because the height of the thumbnail frame (.ogp-quote-thumb-wrap) had been set to height: auto;, a vertically elongated image could occupy more than half of the screen vertically.
  2. max-width: 100% was not specified :
    • In standard website development, the declaration img { max-width: 100%; height: auto; }, which is always included in reset CSS, was missing from .post-body img in the bulletin board post body and from the OGP thumbnail, causing the browser to render the images at their original native resolution.

2. Solution: Aspect Ratio Containment and Responsive Reflow

Regardless of the image’s resolution or aspect ratio (square, panorama, or portrait), I implemented a design combining object-fit: cover and responsive breakpoints so that the image fits beautifully within the frame.

Three carefully considered rules

  1. Physical elimination of overflow: Enforce max-width: 100% on all image elements so that not even a single pixel escapes the container.
  2. Beautiful trimming (object-fit: cover): Prevent images from stretching vertically or being squashed horizontally, displaying a clean crop of the center.
  3. Automatic vertical stacking on smartphone screens: On narrow screens, switch from a horizontal arrangement to a vertical one, stacking the image and text vertically to maximize readability.

3. Full Implementation Overview

① Responsive CSS Definitions

I implemented rigorous styles that remain flawless on both desktop and mobile.

/* Style definitions */ /* 1. Basic guard for images within post bodies */ img, .post-img-thumb { max-width: 100%; height: auto; border-radius: 4px; } /* 2. Thumbnail optimization for quote-box-style layouts */ .ogp-quote-box { display: flex; flex-direction: row; gap: 12px;align-items: flex-start; } .ogp-quote-thumb-wrap { width: 300px; max-width: 100%; height: 180px; max-height: 220px; flex-shrink: 0; overflow: hidden; border-radius: 6px; background: #000; } .ogp-quote-thumb-wrap img, .ogp-quote-thumb { width: 100%; height: 100%; object-fit: cover; /* Crop centrally while maintaining the aspect ratio */ display: block; } /* 3. Responsive control for mobile screens (width 768px or less) */@media (max-width: 768px) { .ogp-quote-box { flex-direction: column; /* Change to vertical layout */ gap: 8px; } .ogp-quote-thumb-wrap { width: 100%; max-width: 280px; height: 160px; max-height: 180px; } }

② Updating the cache buster

Even if the stylesheet is modified, the issue may appear to recur if the browser cache of existing users remains.
To reliably ensure that the latest CSS is applied, the stylesheet's query parameter was incremented to ?v=4.

<!-- index.html --> <link rel="stylesheet" href="style.css?v=4">

4. Verification Results: Visual Confirmation on Actual Devices and in DevTools

Verification was performed using Chrome DevTools mobile emulation (iPhone SE: width 375px; Pixel 7: width 412px) and on actual devices.

Test Item Before the Fix After the Fix (This Change) Presence of Horizontal Scrolling Occurs (the screen jitters horizontally)Completely eliminated! Fits perfectly within the screen width High-resolution images over 1200px Displayed at a massive size and broken apart Neatly cropped and displayed at a maximum of 280px Vertical photos (9:16 aspect ratio) Extended vertically by thousands of pixels Neatly centered within a height of 160px Display on PC Horizontal alignment breaks apart Beautifully aligned at 300px wide × 180px high

5. Summary and Preview of the Next Episode

CSS layout breaks are often a blind spot that goes unnoticed when checked only in a development environment (a large PC screen).
By thoroughly implementing “boundary control” with object-fit: cover and max-width: 100%—which prevents breakdowns no matter what external images are thrown in—the site evolved into a modern bulletin board where external article previews can be enjoyed comfortably on both PCs and smartphones.

Now, while the expressive capabilities of the web browser have been pushed to their limits, there is “another world” that can never be avoided when discussing the culture of 2chan.

That is the existence of “dedicated browsers” (special-purpose browsers).

Dedicated browsers such as JaneStyle, Live2ch, and ChMate have continued to be loved by fans for over 20 years.
They communicate with the server via the “Shift_JIS and dat format protocol from 20 years ago”, rather than through web pages.

“Is it really possible to coexist with and enable communication from the dedicated browsers of the old days, just as they are, on this server running as the latest modern SPA……!?”

Next time, we’ll present 【Episode 058】Making Dedicated Browsers Such as JaneStyle Compatible with the Latest Modern Web — The Inner workings of the Four-Layer Defense Against Shift_JIS, the dat Format, and Character Corruption (Part 3: Finale!). Please look forward to it!

Production service: https://2ch.biz/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently retrieve useful information
  3. You can use the dark theme
What you can do by signing up
Sign upLogin