Adaptive Image Display Layouts for Preserving Image Order

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Conventional image display methods fail to maintain the order of images with different sizes, leading to disorder and inability to express specific meanings.

Innovation Solution

Determine a target layout form for placeholder containers based on the size-related information of images and the target display area, allowing orderly display of images within these containers.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Shape

If images with different sizes are scaled and reordered to fit a fixed placeholder container, then the visual effect on the web page is improved, but the original order of images is lost and specific meanings cannot be expressed

Engineering Contradiction:

Improvevisual effectVSAvoidimage order information

Core Design Contradiction:

ShapeVSLoss of information

Solution Approach 1:

The web page is divided into multiple placeholder containers instead of using a single fixed container. Each placeholder container can independently display one or more images, allowing the system to maintain image order while adapting to different screen sizes. The segmentation enables flexible layout where images are distributed across multiple containers rather than forced into a single reordered container.

Inventive Principle:

Principle #1Segmentation

2Device complexity

If a fixed placeholder container is used for displaying images of different sizes, then the layout is simple and easy to implement, but the images cannot be displayed in their original order

Engineering Contradiction:

Improvelayout complexityVSAvoidimage order preservation

Core Design Contradiction:

Device complexityVSEase of operation

Solution Approach 1:

The placeholder containers are designed to be dynamic rather than fixed. The system dynamically determines the number, size, and arrangement of placeholder containers based on screen width and image characteristics. This dynamic approach allows the layout to automatically adapt to different display environments while preserving image order, eliminating the need for manual reordering operations.

Inventive Principle:

Principle #15Dynamics

3Adaptability or versatility

If images are reordered to fit the container, then the display adapts to the container shape, but the functional meaning of image sequence is lost

Engineering Contradiction:

Improvecontainer adaptationVSAvoidimage sequence meaning

Core Design Contradiction:

Adaptability or versatilityVSLoss of information

Solution Approach 1:

The system transitions from a single-dimensional reordering approach to a two-dimensional layout strategy. Instead of reordering images along one sequence, images are arranged across multiple placeholder containers in spatial dimensions. This dimensional change allows images to maintain their original sequence while adapting to different container configurations through spatial distribution rather than sequential reordering.

Inventive Principle:

Principle #17Another dimension (Dimensionality change)

Data Source

PatentUS12423894B2Image display method, image display device and electronic device

Publication Date: 2025.09.23 QINGDAO HAIER TECH

AI summary

Disclosed are an image display method, an image display device, and an electronic device. The method includes: determining a target display area and a target image set to be displayed, wherein the target image set includes a plurality of images; according to the target display width of the target display area and the size-related information of the plurality of images, determining the target layout form of the placeholder containers associated with each of the plurality of images in the target display area; displaying the plurality of images in the placeholder containers associated therewith, so that the target image set is displayed in the target display area.