A method and related apparatus for displaying an image list

Abstract

The application discloses a kind of display method of image list and related device, it is related to computer image processing technical field, including: obtaining the image set to be rendered, and according to reference image in image set determines template type and container height;Based on template type and container height, boundary constraint processing is carried out to each image in image set, to obtain the cutting size and container width of each image;According to cutting size, the image resource of the image is pulled, and the container view of the image is configured with container height and container width, to show the image resource of the image in the container view of the image.This can realize the unity of multi-graph dynamic display style, avoid image deformation and content truncation, guarantee the neatness and aesthetic degree of multi-graph dynamic overall layout, and realize the optimization of single image display effect, improve the visual experience consistency of mobile terminal content flow, information transmission integrity and the efficiency of system operation.

Description

Technical Field

[0001] This application relates to the field of computer image processing technology, and in particular to a method and related apparatus for displaying an image list. Background Technology

[0002] With the rapid development of mobile internet technology, the text and image content on social platforms has experienced explosive growth. When users post updates on mobile devices, they often include multiple images of different sizes and proportions, covering various formats such as horizontal, vertical, square, and extremely long images.

[0003] In existing mobile application content stream scenarios, a fixed-ratio thumbnail display scheme is typically used to display multi-image animations within limited screen space. When a user browses an animation containing multiple images, the system uniformly crops all images into squares of a fixed size or scales them according to a preset fixed aspect ratio and arranges them in a fixed grid container or linear list. During the image loading phase, when the client requests image resources from the server, it usually uses uniform fixed cropping parameters, without distinguishing the original aspect ratio characteristics of individual images, and finally renders and displays them on the terminal interface as a container view with the same height and width. This easily leads to horizontal images being forcibly compressed and distorted, losing details, and key content of vertical images often being truncated, making it difficult for users to perceive the complete information of the images. Summary of the Invention

[0004] In view of the above problems, this application provides a method and related apparatus for displaying an image list to solve the problems of image distortion and truncation of key content in mixed-scale image display. The specific solution is as follows: The first aspect of this application provides a method for displaying an image list, the method comprising: Obtain the set of images to be rendered, and determine the template type and container height based on the reference image in the set of images; Based on the template type and the container height, boundary constraint processing is performed on each image in the image set to obtain the cropping size and container width of each image; The image resources of the corresponding image are retrieved according to the cropping size, and the container view of the corresponding image is configured with the container height and the container width to display the image resources of the corresponding image in the container view of the corresponding image.

[0005] In one possible implementation, determining the template type and container height based on a reference image in the image set includes: Obtain the first aspect ratio of the reference image; The standard width of a single vertical image is determined based on the screen width, and the standard height of a single vertical image is determined using the standard width of the single vertical image. If the first aspect ratio is greater than or equal to 1, the template type is determined to be a horizontal template, and the container height is determined according to the standard height of the single vertical image, wherein the container height is less than the standard height of the single vertical image; If the first aspect ratio is less than 1, the template type is determined to be a vertical template, and the standard height of the single vertical image is taken as the container height.

[0006] In one possible implementation, the boundary constraint processing of each image in the image set based on the template type and the container height to obtain the cropping size of each image and the container width includes: For each image in the image set, obtain the second aspect ratio and the original image size; The display ratio of the image is determined based on the second aspect ratio and the template type, and the cropping size of the image is determined using the display ratio, the original image size, and the container height. The container width of the image is determined based on the second aspect ratio, the template type, and the container height.

[0007] In one possible implementation, determining the display ratio of the image based on the second aspect ratio and the template type includes: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the first preset ratio threshold is selected as the display ratio, where the first preset ratio threshold is greater than 1. If the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the minimum value between the second aspect ratio and the second preset ratio threshold is selected as the display ratio, and the second preset ratio threshold is greater than the first preset ratio threshold. If the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the third preset ratio threshold is selected as the display ratio, where the third preset ratio threshold is less than 1.

[0008] In one possible implementation, the original image size includes the original image height and the original image width, and determining the cropping size of the image using the display ratio, the original image size, and the container height includes: If the display ratio is greater than or equal to 1, the container height is used as the reference height, the minimum value between the original image height and the reference height is selected as the first cropping height of the image, and the first cropping width of the image is determined according to the first cropping height and the display ratio. If the display ratio is less than 1, the reference width is determined using the container height and the display ratio. The minimum value between the original image width and the reference width is selected as the second cropping width of the image. The second cropping height of the image is determined based on the second cropping width and the display ratio.

[0009] In one possible implementation, determining the container width of the image based on the second aspect ratio, the template type, and the container height includes: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the fourth preset ratio threshold is selected as the first container height-width conversion coefficient of the image, and the container width is determined by using the first container height-width conversion coefficient and the container height, wherein the fourth preset ratio threshold is greater than 1. If the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the container height is taken as the container width; If the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the fifth preset ratio threshold is selected as the second container height-width conversion coefficient of the image, and the container width is determined using the second container height-width conversion coefficient and the container height.

[0010] In one possible implementation, the method for displaying the image list further includes: If the second aspect ratio is greater than or equal to the first preset aspect ratio threshold, or less than or equal to the second preset aspect ratio threshold, the image is marked as a long image and its format is converted. The first preset aspect ratio threshold represents the upper limit of the aspect ratio, and the second preset aspect ratio threshold represents the lower limit of the aspect ratio.

[0011] A second aspect of this application provides an image list display device, the image list display device comprising: The image processing module is used to acquire a set of images to be rendered, and determine the template type and container height based on the reference image in the image set; and perform boundary constraint processing on each image in the image set based on the template type and the container height to obtain the cropping size and container width of each image. The resource retrieval module is used to retrieve the image resources of the corresponding image according to the cropping size, and configure the container view of the corresponding image with the container height and the container width, so as to display the image resources of the corresponding image in the container view of the corresponding image.

[0012] A third aspect of this application provides an electronic device, comprising at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program so that the electronic device can implement the image list display method of the first aspect or any implementation thereof.

[0013] A fourth aspect of this application provides a computer storage medium carrying one or more computer programs, which, when executed by an electronic device, enable the electronic device to implement the image list display method described in the first aspect or any implementation thereof.

[0014] The fifth aspect of this application provides a computer program product including computer-readable instructions that, when executed on an electronic device, cause the electronic device to implement the image list display method of the first aspect or any implementation thereof.

[0015] By employing the above technical solutions, this application provides a method and related apparatus for displaying an image list, comprising: acquiring a set of images to be rendered, and determining a template type and container height based on a reference image in the image set; performing boundary constraint processing on each image in the image set based on the template type and container height to obtain the cropping size and container width of each image; fetching the image resources of the corresponding image according to the cropping size, and configuring the container view of the corresponding image with the container height and container width to display the image resources of the corresponding image in the container view of the corresponding image. This application dynamically determines a globally applicable template type and a unified container height based on a reference image, and then performs independent boundary constraint processing on each image in the image set, accurately calculating the cropping size and container width adapted to the characteristics of each image, and finally fetching image resources according to the cropping size and configuring the view with the container height and container width to complete the rendering. This can achieve a unified style for dynamic display of multiple images, avoid image distortion and content truncation, ensure the regularity and aesthetics of the overall layout of dynamic multi-image display, optimize the display effect of individual images, and improve the visual consistency, information transmission integrity, and system operation efficiency of mobile content flow. Attached Figure Description

[0016] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0017] Figure 1 A flowchart illustrating a method for displaying an image list provided in an embodiment of this application; Figure 2 A partial flowchart illustrating a method for displaying an image list, provided in an embodiment of this application; Figure 3 This is another part of the flowchart illustrating a method for displaying an image list provided in an embodiment of this application; Figure 4 A schematic diagram of the structure of an image list display device provided in an embodiment of this application; Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0018] The embodiments of this application are described below with reference to the accompanying drawings. The terminology used in the implementation section of this application is for explaining specific embodiments only and is not intended to limit the scope of this application.

[0019] As will be known to those skilled in the art, with the development of technology and the emergence of new scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.

[0020] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such terms are interchangeable where appropriate; this is merely a way of distinguishing objects with the same attributes in the embodiments of this application. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion, so that a process, method, system, product, or apparatus that comprises a series of elements is not necessarily limited to those elements, but may include other elements not explicitly listed or inherent to those processes, methods, products, or apparatuses.

[0021] To address the issues that fixed-ratio thumbnail display schemes can easily lead to distortion in mixed-ratio image displays and truncation of key content, this application provides a method for displaying an image list. The image list display method of this application embodiment will be described in detail below with reference to the accompanying drawings.

[0022] See Figure 1 , Figure 1 This is a flowchart illustrating a method for displaying an image list, as provided in an embodiment of this application. Figure 1 As shown in the figure, an image list display method provided in this application embodiment is applied to a client and may include steps S101 to S103, which are described in detail below.

[0023] S101, obtain the set of images to be rendered, and determine the template type and container height based on the reference image in the image set.

[0024] In this embodiment, the image set to be rendered is a list of image and text dynamic data containing at least one image published by a user in a mobile application, such as social media. After obtaining the image set, a reference image is determined from the image set, for example, the first image is used as the reference image, and this reference image serves as the basis for deciding the overall display style of the image set. Specifically, the template type is determined based on the aspect ratio of the reference image, and the container height is calculated based on the screen width of the current terminal device. The template type is a classification identifier that defines the display tone of the image set, specifically including horizontal templates and vertical templates; the container height is a fixed pixel value in the vertical direction of the rectangular area that carries the image display, and this container height remains consistent across all images in the same image set.

[0025] In one possible implementation, the aspect ratio of the reference image is first obtained. Then, the standard width of a single vertical image is calculated using the screen width, and the standard height of the single vertical image is derived based on a preset standard ratio. If the aspect ratio of the reference image is greater than or equal to 1, meaning the reference image is a horizontal or rectangular image, the template type is determined to be a horizontal template, and the container height is set to a preset multiple of the standard height of the single vertical image. If the aspect ratio of the reference image is less than 1, meaning the reference image is a vertical image, the template type is determined to be a vertical template, and the standard height of the single vertical image is directly used as the container height. This ensures that the display height of multiple images within the same dynamic element is consistent, eliminating visual disjointedness.

[0026] See Figure 2 , Figure 2 This is a partial flowchart illustrating a method for displaying an image list, as provided in an embodiment of this application. Figure 2 As shown in the embodiment of this application, a method for displaying an image list is provided. In step S101, "determine the template type and container height based on the reference image in the image set", which may include steps S201 to S204. These steps are described in detail below.

[0027] S201, Obtain the first aspect ratio of the reference image.

[0028] In this embodiment, the first aspect ratio is the ratio of the width to the height of the reference image. The width and height of the reference image are obtained by reading its original dimensions, and a division operation is performed to obtain the first aspect ratio.

[0029] S202, determine the standard width of a single vertical image based on the screen width, and determine the standard height of a single vertical image using the standard width of the single vertical image.

[0030] In this embodiment, the standard width of a single vertical image is dynamically calculated based on the available screen width of the current terminal device, thereby ensuring that the image has a reasonable display proportion on the screen. Specifically, the standard width of a single vertical image = (screen width - 2 × left and right spacing of the page) / 3 × 2.

[0031] Furthermore, after obtaining the standard width of a single vertical image, the standard height of the single vertical image can be calculated according to a preset standard vertical image ratio (e.g., 3:4). Specifically, the standard height of a single vertical image = standard width of a single vertical image / (3 / 4). For example, when the available screen width is 1080 pixels, the standard width of a single vertical image is set to 720 pixels, and the standard height of the single vertical image is then calculated to be 960 pixels. This dynamic calculation method based on screen width avoids the problem of displaying too large or too small on devices with different resolutions due to fixed pixel values, thus tightly coupling the standard height with device characteristics.

[0032] S203, if the first aspect ratio is greater than or equal to 1, determine the template type as a horizontal template, and determine the container height according to the standard height of a single vertical image, with the container height being less than the standard height of a single vertical image.

[0033] In this embodiment, if the first aspect ratio is greater than or equal to 1, the template type is determined to be a horizontal template. This horizontal template is a layout mode suitable for displaying horizontal or square images and can be identified by Boolean flags or enumeration values. Furthermore, the container height is set to a value smaller than the standard height of a single vertical image. Specifically, it can be the standard height of a single vertical image multiplied by a compression factor less than 1, such as 0.75, thus forming a relatively compact horizontal display space. This allows the container height to be actively reduced to fit the visual center of gravity of the horizontal image when the base image is horizontal or square, while maintaining the neatness of multiple images arranged. For example, if the standard height of a single vertical image is 960 pixels, when the first aspect ratio is detected to be greater than 1, the template type is determined to be a horizontal template, and the container height is set to 720 pixels. This achieves automatic contraction of the vertical space when the base image has a horizontal feature, highlighting the wide field of view of the horizontal image while providing a unified and reasonable vertical boundary constraint for other images in the same image set.

[0034] S204, if the first aspect ratio is less than 1, determine the template type as a vertical template, and use the standard height of a single vertical image as the container height.

[0035] In this embodiment, if the first aspect ratio is less than 1, the template type is determined to be a portrait template. This portrait template is a layout mode suitable for vertical image display and can be identified by Boolean tags or enumeration values. Furthermore, the container height can be directly set to the standard height of a single portrait image. This ensures maximum vertical display space is reserved when the base image is portrait, guaranteeing that vertical content is fully presented and avoiding the loss of key information due to height compression. By directly mapping the vertical feature recognition result to the standard height, a full-height adaptation mechanism for portrait images is established, ensuring the integrity and visual impact of image content under the portrait template.

[0036] S102, perform boundary constraint processing on each image in the image set based on the template type and container height to obtain the cropping size of each image and the container width.

[0037] In this embodiment, for each image in the image set, the display ratio is limited based on its aspect ratio and template type matching relationship, combined with the container height, to achieve boundary constraints. The cropping size is the actual pixel width and height required when requesting image resources from the server; the container width is the horizontal space occupied by a single image in the horizontal sliding list. By handling boundary constraints, it is ensured that the image maximizes the display of effective content without distortion, and that the requested image resolution precisely matches the actual display size, thereby significantly reducing network traffic consumption and memory usage.

[0038] In one possible implementation, for each image in the image set, precise image feature inputs are constructed by obtaining the second aspect ratio and the original image size. Then, using the display ratio as an intermediate variable, intelligent boundary constraints are implemented for different template types and image shapes, effectively preventing issues such as horizontal images being too wide and overflowing or vertical images being too narrow and leaving white space. Furthermore, through the collaborative calculation of the display ratio, original image size, and container height, a cropping size that strictly matches the actual display requirements is generated, significantly reducing the consumption of invalid bandwidth. Simultaneously, the container width, dynamically calculated based on the second aspect ratio, template type, and container height, ensures that each image occupies a horizontal space appropriate to its visual weight. This solves the problem of differentiated display of images with different aspect ratios under the same template, ensuring both dynamic visual consistency across multiple images and optimizing the display effect of a single image.

[0039] See Figure 3 , Figure 3 This is another schematic flowchart illustrating a method for displaying an image list provided in an embodiment of this application. For example... Figure 3As shown in the embodiment of this application, an image list display method is provided, wherein step S102, "performing boundary constraint processing on each image in the image set based on template type and container height to obtain the cropping size and container width of each image", may include steps S301 to S303, which are described in detail below.

[0040] S301, for each image in the image set, obtain the second aspect ratio and original image size of that image.

[0041] In this embodiment of the application, for each image in the image set, the original image size of the image is read and obtained, and the width and height of the image are obtained using the original image size, and a division operation is performed to obtain the second aspect ratio.

[0042] S302, determine the display ratio of the image based on the second aspect ratio and the template type, and determine the cropping size of the image using the display ratio, the original image size, and the container height.

[0043] In this embodiment, the display ratio is the target aspect ratio when a single image is displayed within the container, which can be determined using a boundary constraint mechanism. Specifically, this is achieved by determining whether the second aspect ratio is less than 1 and whether the template type is a horizontal or vertical template. Additionally, the cropping size is the actual cropped width and height in pixels when requesting image resources from the server, and can be determined by combining the display ratio and the container height.

[0044] In one possible implementation, when the second aspect ratio is greater than or equal to 1 and the template type is a horizontal template, the minimum value between the second aspect ratio and the first preset ratio threshold is selected as the display ratio to prevent the horizontal image from being too wide and causing layout overflow; when the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the minimum value between the second aspect ratio and the second preset ratio threshold is selected; when the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the third preset ratio threshold is selected as the display ratio to ensure that the vertical image does not produce too much white space due to being too narrow. In this regard, an image list display method provided by this application embodiment, wherein step S302, "determining the display ratio of the image according to the second aspect ratio and the template type," can adopt the following steps: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the first preset ratio threshold is selected as the display ratio, and the first preset ratio threshold is greater than 1. If the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the minimum value between the second aspect ratio and the second preset ratio threshold is selected as the display ratio, and the second preset ratio threshold is greater than the first preset ratio threshold. If the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the third preset ratio threshold is selected as the display ratio, where the third preset ratio threshold is less than 1.

[0045] In this embodiment, the first preset aspect ratio threshold is a constant greater than 1, used to limit the maximum aspect ratio of horizontal images under a horizontal template, preventing images that are too wide from occupying too much space in the horizontal scrolling list or causing visual imbalance. Specifically, when the second aspect ratio of the image is greater than or equal to 1, it indicates that the image is a horizontal or rectangular image. If the template type is a horizontal template at this time, the second and first preset aspect ratio thresholds are compared, and the smaller value between the two is selected as the display ratio. By selecting the minimum value in this way, it can be ensured that under a horizontal template, the display ratio of all horizontal images does not exceed the preset upper limit, which avoids excessive stretching or white space of extremely wide images and ensures the content integrity of non-extremely wide images.

[0046] The second preset ratio threshold is used to limit the maximum aspect ratio of horizontal images displayed under a vertical template. Since the overall container height of a vertical template is relatively high, to fully utilize vertical space while also considering the horizontal expansiveness of the horizontal image, the second preset ratio threshold is set to be greater than the first preset ratio threshold. In other words, the vertical template has a higher tolerance for the aspect ratio of horizontal images. Specifically, when the second aspect ratio of the image is greater than or equal to 1 and the template type is a vertical template, the second aspect ratio is compared with the second preset ratio threshold, and the smaller value is selected as the display ratio. This allows the horizontal image to obtain a wider display space within the vertical container than within the horizontal container, effectively reducing top and bottom white space and improving visual fullness.

[0047] The third preset aspect ratio threshold is a constant less than 1, used to set the lower limit for the display ratio of vertical images, preventing them from appearing too narrow and elongated in the list, making the content difficult to read. Specifically, when the second aspect ratio of the image is less than 1, it indicates that the image is a vertical image. At this time, regardless of whether the template type is horizontal or vertical, the second aspect ratio is compared with the third preset aspect ratio threshold, and the larger value is selected as the display ratio. By selecting the maximum value, it is possible to effectively avoid extremely narrow and long images occupying too little width in the horizontal list, ensuring the neatness of the list layout and the visibility of the main image. At the same time, in conjunction with the subsequent top-cropping strategy, key information at the top of the vertical image is retained first.

[0048] In this embodiment, the differentiated setting of the first and second preset ratio thresholds allows horizontal images to obtain a wider display space under a vertical template than under a horizontal template, adapting to the height characteristics of different templates. The third preset ratio threshold, acting as a lower limit constraint for vertical images, complements the upper limit constraint for horizontal images (i.e., the first and second preset ratio thresholds), respectively solving the problems of excessively wide horizontal images and excessively narrow vertical images. This segmented threshold selection strategy, combined with the functional logic judgment of minimum and maximum values, ensures that regardless of the image proportions (horizontal, vertical, square, or long) in the image set, and regardless of whether the overall template is horizontal or vertical, each image can be calculated to have a display ratio that conforms to both the original ratio characteristics and the layout aesthetic requirements. Therefore, it not only avoids image distortion caused by forced stretching but also prevents severe cropping or excessive white space due to ratio discrepancies, significantly improving the visual consistency and content delivery efficiency of dynamic text and images in mobile application content streams.

[0049] In one possible implementation, by distinguishing between two display scenarios with a display ratio greater than or equal to 1 and less than 1, strategies of determining width based on height and determining height based on width are adopted respectively. Combined with a boundary constraint function that takes the minimum value, this ensures that regardless of changes in the original image ratio, the generated cropping size can strictly match the display ratio requirements of the front-end container while automatically adapting to the upper limit of the original image's actual physical size. This processing method not only solves the problem of unified display of images with different ratios in multi-image mixed-layout scenarios but also eliminates the transmission and decoding of invalid pixel data at the source, improving the loading speed and rendering efficiency of the image list. In this regard, an image list display method provided in this application embodiment, wherein the original image size includes the original image height and the original image width, and step S302, "determining the cropping size of the image using the display ratio, the original image size, and the container height," can be implemented using the following steps: If the display ratio is greater than or equal to 1, the container height is used as the reference height, the minimum value between the original image height and the reference height is selected as the first cropping height of the image, and the first cropping width of the image is determined according to the first cropping height and the display ratio. If the display ratio is less than 1, the reference width is determined using the container height and the display ratio. The minimum value between the original image width and the reference width is selected as the second cropping width of the image. The second cropping height of the image is then determined based on the second cropping width and the display ratio.

[0050] In this embodiment, a display ratio greater than or equal to 1 typically applies to horizontal or square images displayed within a container. In this scenario, the container height is used as the baseline height for cropping. A first cropping height is then determined through boundary constraints; that is, the original image height is compared to this baseline height, and the minimum value is selected as the first cropping height. This ensures that the image height requested from the server will not exceed the actual displayable height of the container, while also preventing invalid operations where the requested height exceeds the physical height of the original image. Furthermore, after determining the first cropping height, the product of the first cropping height and the display ratio is used as the first cropping width, ensuring that the cropped image area strictly conforms to the preset target aspect ratio. By using the container height as an anchor point to deduce resource dimensions, the pixel loading amount in the vertical direction of horizontal images can be precisely controlled, significantly saving network bandwidth.

[0051] A display ratio less than 1 typically indicates a scenario where a vertical image is displayed within a container. In this scenario, because the container height is fixed and the image is vertically elongated, directly using the height as the baseline might lead to unexpected width calculations. Therefore, a reverse derivation strategy is adopted: the product of the container height and the display ratio is used as the baseline width. Then, a second cropping width is determined through boundary constraints. This involves comparing the original image width with the baseline width and selecting the minimum value as the second cropping width, ensuring that the requested size does not exceed the physical limits of the original image. Furthermore, after determining the second cropping width, the ratio of the second cropping width to the display ratio is used as the second cropping height to ensure that the final cropped area maintains the target vertical aspect ratio.

[0052] The embodiments of this application use different proportions of image dynamic switching calculation benchmarks to ensure that the image content is fully adapted within the container and to achieve precise alignment between the image resource loading resolution and the actual display pixels, effectively avoiding the problems of excessive memory usage and bandwidth waste.

[0053] S303, determine the container width of the image based on the second aspect ratio, template type, and container height.

[0054] In this embodiment, the container width is the horizontal space occupied by a single image in the horizontal sliding list. By calculating the container width, images with different aspect ratios can each occupy a reasonable visual weight. Specifically, the container height can be branched based on the second aspect ratio and the template type, so that the width occupied by each image in the horizontal sliding list matches its visual content density. Horizontal images gain a wider display space to present a panoramic view, while vertical images remain compact to avoid excessive white space on both sides. This maximizes the utilization of screen space while ensuring the overall consistency of the dynamic style of multiple images.

[0055] In one possible implementation, under a horizontal template, the width of the horizontal image increases proportionally but is limited by a fourth preset ratio threshold, achieving moderate extension of wide images and automatic regularization of ultra-wide images. Under a vertical template, horizontal images are uniformly converged into squares, eliminating the interference of dissimilar ratios on the overall vertical style. For vertical images, a lower limit for width is set through a fifth preset ratio threshold, preventing the container from becoming too narrow due to extremely long images. This allows the horizontal sliding list to intelligently adapt to image combinations of various ratios, preserving the horizontal tension of horizontal images while maintaining the uniformity of vertical templates, and ensuring basic display space for vertical and long images. In this regard, an image list display method provided in this application embodiment, wherein step S303 "determining the container width of the image based on the second aspect ratio, template type, and container height" can be implemented using the following steps: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the fourth preset ratio threshold is selected as the first container height-width conversion coefficient of the image, and the container width is determined by the first container height-width conversion coefficient and the container height. The fourth preset ratio threshold is greater than 1. If the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the container height will be used as the container width. If the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the fifth preset ratio threshold is selected as the second container width-to-height conversion coefficient of the image, and the container width is determined using the second container width-to-height conversion coefficient and the container height.

[0056] In this embodiment, when the second aspect ratio is greater than or equal to 1, the image is characterized as a horizontal or rectangular image. If the template type is a horizontal template, it means that the display reference height of the image set has been set to a relatively small fixed value according to the horizontal characteristics of the reference image to adapt to the visual needs of horizontal expansion. To this end, the first container height-to-width conversion coefficient of the image is determined by boundary constraints, that is, by comparing the second aspect ratio of the image with a fourth preset ratio threshold and selecting the minimum value as the first container height-to-width conversion coefficient. The fourth preset ratio threshold is a constant greater than 1, used to limit the maximum width of the image container under the horizontal template, preventing excessively wide images from occupying too much horizontal screen space and causing a decrease in the list scrolling experience. Furthermore, the product of the first container height-to-width conversion coefficient and the container height is used as the container width of the image. This allows horizontal images with appropriate proportions to occupy space according to their true proportions, while ultra-wide images are limited to a reasonable width range, with the excess portion being centered and cropped in subsequent displays. In this embodiment, a container width matching its proportion but subject to upper limit constraints is assigned to the horizontal images under the horizontal template. By introducing a fourth preset ratio threshold as the upper limit boundary, we can effectively avoid excessive stretching of extremely wide images in the horizontal list, ensuring the compactness of the overall list layout and the consistency of visual rhythm, while ensuring that the ratio of container width to container height conforms to the aesthetic standards of horizontal display.

[0057] Furthermore, when the aspect ratio is greater than or equal to 1 and the template type is a portrait template, it indicates that a horizontal or square image is included in the portrait template. To maintain strict consistency in the height of all image containers and to avoid disrupting the overall vertical flow visual continuity due to forced width stretching of horizontal images, this embodiment sets the container width of the image to a predetermined container height. In this case, the horizontal or square image is confined within a square container in the portrait template, and the image content is displayed with the center of the container as the focal point. White space may be generated above, below, left, or right, or the core area may be retained according to a specific cropping strategy. This embodiment solves the problem of uncontrollable width that may be caused by horizontal or square images in a vertically dominated horizontal sliding list by forcibly unifying the width and height. The square container setting simplifies layout calculations and ensures that even if horizontal images are mixed in under the portrait template, the cell width variation of the entire horizontal list is within a controllable range, avoiding the visual abruptness caused by an excessively wide single horizontal image and maintaining the unique vertical visual flow of the portrait template.

[0058] Furthermore, when the second aspect ratio is less than 1, the image is considered a vertical image, including both ordinary vertical images and extremely long images. Regardless of whether the template type is horizontal or vertical, the second container width-to-height conversion coefficient of the image is determined through boundary constraints. This involves comparing the image's second aspect ratio with a fifth preset ratio threshold and selecting the maximum value as the second container width-to-height conversion coefficient. This fifth preset ratio threshold is a constant less than 1, used to set a lower limit for the width of the vertical image container, preventing extremely narrow vertical images from causing the container width to be too small to accommodate effective interactive content or visual information. Furthermore, the product of the second container width-to-height conversion coefficient and the container height is used as the container width of the image. In this embodiment, by setting the fifth preset ratio threshold, even long images with extremely small aspect ratios are ensured to have a minimized safe width in the list. This not only guarantees the visibility of the image content but also provides sufficient hotspot area for user clicks. For ordinary vertical images, their original aspect ratio allows them to occupy a narrower space in the horizontal sliding list, thus accommodating more images within the limited screen width or providing a sense of breathing space, achieving a balance between space utilization and display effect.

[0059] In one possible implementation, intelligent recognition and optimized display of images with extreme aspect ratios can be achieved, including long image tagging and format conversion. Long image tagging, combined with UI layer badge display, intuitively conveys the image's length attribute to the user, compensating for the information loss caused by cropping. The format conversion function cleverly utilizes URL suffix replacement technology to downgrade high-consumption, extreme-partial-ratio GIFs to static images, resolving performance concerns without increasing the burden on additional decoding libraries. In this regard, an image list display method provided in this application embodiment further includes the following steps: If the second aspect ratio is greater than or equal to the first preset aspect ratio threshold, or less than or equal to the second preset aspect ratio threshold, the image is marked as a long image and its format is converted. The first preset aspect ratio threshold represents the upper limit of the aspect ratio, and the second preset aspect ratio threshold represents the lower limit of the aspect ratio.

[0060] In this embodiment, the first preset aspect ratio threshold and the second preset aspect ratio threshold are pre-set critical values ​​used to define the boundaries of horizontally elongated images and vertically elongated images, respectively. Specifically, when the second aspect ratio of an image is greater than or equal to the first preset aspect ratio threshold, the image is determined to be a horizontally elongated image, with its width being much greater than its height; when the second aspect ratio of an image is less than or equal to the second preset aspect ratio threshold, the image is determined to be a vertically elongated image, with its height being much greater than its width.

[0061] If the second aspect ratio of the image is greater than or equal to the first preset aspect ratio threshold, or less than or equal to the second preset aspect ratio threshold, then the image undergoes long image marking and format conversion. Long image marking involves writing a specific identifier (such as a boolean value or enumeration type) into the image's data object. This identifier instructs the UI rendering layer to overlay a long image text badge or icon at a specific location in the view (such as the upper right corner) when displaying the image. This informs the user that the image contains more content than the currently visible area, guiding the user to click and view the complete image, thus solving the problem of users not being able to perceive the actual length of the image due to conventional cropping. Format conversion mainly targets dynamic image formats, such as GIF. When the image is in GIF format, the request address of the image resource is automatically modified, replacing the URL suffix from .gif to .jpg, so that when the client requests the image from the server, it obtains a static JPEG image instead of a dynamic GIF image. Since GIF images with extreme proportions often contain a large number of frames, direct decoding can cause a surge in mobile device memory usage and stuttering when scrolling through lists. By converting them to static images for display, decoding costs and memory consumption can be significantly reduced while ensuring the presentation of visual content, thus avoiding performance bottlenecks.

[0062] S103, pull the image resources of the corresponding image according to the cropping size, and configure the container view of the corresponding image with the container height and container width to display the image resources of the corresponding image in the container view of the corresponding image.

[0063] In this embodiment, a network request is initiated to the CDN or image server based on the cropping size request URL to obtain image resources of a specific resolution after server-side cropping. Furthermore, the container height and width of each image are configured in the image's container view, thereby loading the image resources into that container view. Because the container width is dynamically calculated, images of different aspect ratios will present an effect of varying widths but uniform heights in the horizontally scrolling list; simultaneously, because the cropping size is precisely calculated based on the display ratio, the loaded images will not suffer from memory waste due to excessively high resolution, nor from display blurring due to excessively low resolution.

[0064] Based on the above description, the image list display method provided in this application dynamically determines a globally applicable template type and a unified container height using a reference image. Then, it performs independent boundary constraint processing on each image in the image set, accurately calculating the cropping size and container width adapted to the characteristics of each image. Finally, it retrieves image resources according to the cropping size and configures the view using the container height and width to complete rendering. This achieves a unified dynamic display style for multiple images, avoids image distortion and content truncation, ensures the regularity and aesthetics of the overall dynamic layout of multiple images, optimizes the display effect of individual images, and improves the visual consistency, information transmission integrity, and system operating efficiency of the mobile content stream.

[0065] The above describes a method for displaying an image list according to an embodiment of this application. The following describes the apparatus for performing the above-described method for displaying an image list.

[0066] See Figure 4 , Figure 4 This is a schematic diagram of the structure of an image list display device provided in an embodiment of this application. Figure 4 As shown in the embodiment of this application, an image list display device includes: Image processing module 401 is used to acquire a set of images to be rendered, and determine the template type and container height based on the reference image in the image set; and perform boundary constraint processing on each image in the image set based on the template type and container height to obtain the cropping size and container width of each image. The resource retrieval module 402 is used to retrieve the image resources of the corresponding image according to the cropping size, and configure the container view of the corresponding image with the container height and container width to display the image resources of the corresponding image in the container view of the corresponding image.

[0067] In one possible implementation, the image processing module 401, used to determine the template type and container height based on a reference image in the image set, is specifically used for: Obtain the first aspect ratio of the reference image; determine the standard width of a single vertical image based on the screen width, and determine the standard height of a single vertical image using the standard width of the single vertical image; if the first aspect ratio is greater than or equal to 1, determine the template type as a horizontal template, and determine the container height based on the standard height of the single vertical image, with the container height being less than the standard height of the single vertical image; if the first aspect ratio is less than 1, determine the template type as a vertical template, and use the standard height of the single vertical image as the container height.

[0068] In one possible implementation, an image processing module 401, used to perform boundary constraint processing on each image in the image set based on the template type and container height to obtain the cropping size of each image and the width of the container, is specifically used for: For each image in the image set, obtain the second aspect ratio and the original image size; determine the display ratio of the image based on the second aspect ratio and the template type, and determine the cropping size of the image using the display ratio, the original image size, and the container height; determine the container width of the image based on the second aspect ratio, the template type, and the container height.

[0069] In one possible implementation, the image processing module 401, used to determine the display ratio of the image based on the second aspect ratio and the template type, is specifically used for: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the first preset ratio threshold is selected as the display ratio, and the first preset ratio threshold is greater than 1; if the second aspect ratio is greater than or equal to 1 and the template type is a portrait template, the minimum value between the second aspect ratio and the second preset ratio threshold is selected as the display ratio, and the second preset ratio threshold is greater than the first preset ratio threshold; if the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the third preset ratio threshold is selected as the display ratio, and the third preset ratio threshold is less than 1.

[0070] In one possible implementation, the original image size includes the original image height and the original image width. The image processing module 401, used to determine the cropping size of the image using the display scale, the original image size, and the container height, is specifically used for: If the display ratio is greater than or equal to 1, the container height is used as the reference height, and the minimum value between the original image height and the reference height is selected as the first cropping height of the image. The first cropping width of the image is then determined based on the first cropping height and the display ratio. If the display ratio is less than 1, the reference width is determined using the container height and the display ratio. The minimum value between the original image width and the reference width is selected as the second cropping width of the image. The second cropping height of the image is then determined based on the second cropping width and the display ratio.

[0071] In one possible implementation, the image processing module 401, used to determine the container width of the image based on the second aspect ratio, template type, and container height, is specifically used for: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the fourth preset ratio threshold is selected as the first container height-width conversion coefficient of the image, and the container width is determined using the first container height-width conversion coefficient and the container height, where the fourth preset ratio threshold is greater than 1; if the second aspect ratio is greater than or equal to 1 and the template type is a portrait template, the container height is used as the container width; if the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the fifth preset ratio threshold is selected as the second container height-width conversion coefficient of the image, and the container width is determined using the second container height-width conversion coefficient and the container height.

[0072] In one possible implementation, the image processing module 401 is further configured to: If the second aspect ratio is greater than or equal to the first preset aspect ratio threshold, or less than or equal to the second preset aspect ratio threshold, the image is marked as a long image and its format is converted. The first preset aspect ratio threshold represents the upper limit of the aspect ratio, and the second preset aspect ratio threshold represents the lower limit of the aspect ratio.

[0073] It should be noted that the detailed functions of each module in the embodiments of this application can be found in the corresponding disclosure of the above-mentioned image list display method embodiments, and will not be repeated here.

[0074] This application also provides an electronic device in its embodiments. See also... Figure 5 , Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device in this embodiment may include, but is not limited to, fixed terminals such as mobile phones, laptops, PDAs (personal digital assistants), PADs (tablet computers), desktop computers, etc. Figure 5 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0075] like Figure 5 As shown, the electronic device may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 501, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 502 or a program loaded from a storage device 508 into a random access memory (RAM) 503. When the electronic device is powered on, the RAM 503 also stores various programs and data required for the operation of the electronic device. The processing unit 501, ROM 502, and RAM 503 are interconnected via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0076] Typically, the following devices can be connected to I / O interface 505: input devices 506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 507 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 508 including, for example, memory cards, hard drives, etc.; and communication devices 509. Communication device 509 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 5 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown. More or fewer devices may be implemented or have alternatively.

[0077] This application also provides a computer program product, including computer-readable instructions, which, when executed on an electronic device, cause the electronic device to implement any of the image list display methods provided in this application.

[0078] This application also provides a computer-readable storage medium that carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any of the image list display methods provided in this application.

[0079] It should also be noted that the device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. In addition, in the device embodiment drawings provided in this application, the connection relationship between modules indicates that they have a communication connection, which can be implemented as one or more communication buses or signal lines.

[0080] Through the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware, or it can be implemented by special-purpose hardware including application-specific integrated circuits, special-purpose CPUs, special-purpose memory, special-purpose components, etc. Generally, any function performed by a computer program can be easily implemented by corresponding hardware, and the specific hardware structure used to implement the same function can be diverse, such as analog circuits, digital circuits, or special-purpose circuits. However, for this application, software program implementation is more often the preferred implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a readable storage medium, such as a computer floppy disk, USB flash drive, mobile hard disk, ROM, RAM, magnetic disk, or optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, training equipment, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0081] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product.

[0082] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, training device, or data center to another website, computer, training device, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a training device or data center that integrates one or more available media. The available media may be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives (SSDs)).

Claims

1. A method for displaying an image list, characterized in that, The methods for displaying the image list include: Obtain the set of images to be rendered, and determine the template type and container height based on the reference image in the set of images; Based on the template type and the container height, boundary constraint processing is performed on each image in the image set to obtain the cropping size and container width of each image; The image resources of the corresponding image are retrieved according to the cropping size, and the container view of the corresponding image is configured with the container height and the container width to display the image resources of the corresponding image in the container view of the corresponding image; The step of performing boundary constraint processing on each image in the image set based on the template type and the container height to obtain the cropping size and container width of each image includes: For each image in the image set, obtain the second aspect ratio and the original image size; The display ratio of the image is determined based on the second aspect ratio and the template type, and the cropping size of the image is determined using the display ratio, the original image size, and the container height. The container width of the image is determined based on the second aspect ratio, the template type, and the container height; Determining the display ratio of the image based on the second aspect ratio and the template type includes: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the first preset ratio threshold is selected as the display ratio, where the first preset ratio threshold is greater than 1. If the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the minimum value between the second aspect ratio and the second preset ratio threshold is selected as the display ratio, and the second preset ratio threshold is greater than the first preset ratio threshold. If the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the third preset ratio threshold is selected as the display ratio, where the third preset ratio threshold is less than 1.

2. The method for displaying an image list according to claim 1, characterized in that, The step of determining the template type and container height based on the reference image in the image set includes: Obtain the first aspect ratio of the reference image; The standard width of a single vertical image is determined based on the screen width, and the standard height of a single vertical image is determined using the standard width of the single vertical image. If the first aspect ratio is greater than or equal to 1, the template type is determined to be a horizontal template, and the container height is determined according to the standard height of the single vertical image, wherein the container height is less than the standard height of the single vertical image; If the first aspect ratio is less than 1, the template type is determined to be a vertical template, and the standard height of the single vertical image is taken as the container height.

3. The method for displaying an image list according to claim 1, characterized in that, The original image size includes the original image height and the original image width. Determining the cropping size of the image using the display ratio, the original image size, and the container height includes: If the display ratio is greater than or equal to 1, the container height is used as the reference height, the minimum value between the original image height and the reference height is selected as the first cropping height of the image, and the first cropping width of the image is determined according to the first cropping height and the display ratio. If the display ratio is less than 1, the reference width is determined using the container height and the display ratio. The minimum value between the original image width and the reference width is selected as the second cropping width of the image. The second cropping height of the image is determined based on the second cropping width and the display ratio.

4. The method for displaying an image list according to claim 1, characterized in that, Determining the container width of the image based on the second aspect ratio, the template type, and the container height includes: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the fourth preset ratio threshold is selected as the first container height-width conversion coefficient of the image, and the container width is determined by using the first container height-width conversion coefficient and the container height, wherein the fourth preset ratio threshold is greater than 1. If the second aspect ratio is greater than or equal to 1 and the template type is a vertical template, the container height is taken as the container width; If the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the fifth preset ratio threshold is selected as the second container height-width conversion coefficient of the image, and the container width is determined using the second container height-width conversion coefficient and the container height.

5. The method for displaying an image list according to claim 1, characterized in that, The method for displaying the image list also includes: If the second aspect ratio is greater than or equal to the first preset aspect ratio threshold, or less than or equal to the second preset aspect ratio threshold, the image is marked as a long image and its format is converted. The first preset aspect ratio threshold represents the upper limit of the aspect ratio, and the second preset aspect ratio threshold represents the lower limit of the aspect ratio.

6. A display device for an image list, characterized in that, The display device for the image list includes: The image processing module is used to acquire a set of images to be rendered, and determine the template type and container height based on the reference image in the image set; and perform boundary constraint processing on each image in the image set based on the template type and the container height to obtain the cropping size and container width of each image. The resource retrieval module is used to retrieve the image resources of the corresponding image according to the cropping size, and configure the container view of the corresponding image with the container height and the container width, so as to display the image resources of the corresponding image in the container view of the corresponding image; An image processing module for performing boundary constraint processing on each image in the image set based on the template type and the container height to obtain the cropping size of each image and the container width, specifically used for: For each image in the image set, obtain the second aspect ratio and the original image size; determine the display ratio of the image based on the second aspect ratio and the template type, and determine the cropping size of the image using the display ratio, the original image size, and the container height; determine the container width of the image based on the second aspect ratio, the template type, and the container height. The image processing module, used to determine the display ratio of the image based on the second aspect ratio and the template type, is specifically used for: If the second aspect ratio is greater than or equal to 1 and the template type is a landscape template, the minimum value between the second aspect ratio and the first preset ratio threshold is selected as the display ratio, where the first preset ratio threshold is greater than 1; if the second aspect ratio is greater than or equal to 1 and the template type is a portrait template, the minimum value between the second aspect ratio and the second preset ratio threshold is selected as the display ratio, where the second preset ratio threshold is greater than the first preset ratio threshold; if the second aspect ratio is less than 1, the maximum value between the second aspect ratio and the third preset ratio threshold is selected as the display ratio, where the third preset ratio threshold is less than 1.

7. An electronic device, characterized in that, It includes at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program to enable the electronic device to implement the image list display method as described in any one of claims 1 to 5.

8. A computer storage medium, characterized in that, The storage medium carries one or more computer programs that, when executed by an electronic device, enable the electronic device to implement the image list display method as described in any one of claims 1 to 5.

Images