How to use the uniapp framework to achieve adaptive display of images uploaded by users without stretching or cropping?

Implement adaptive display of pictures uploaded by users under Uniapp framework

When developing applications similar to Xiaohongshu, the size of the images uploaded by users is often not uniform. How to avoid image stretching or cropping and realize adaptive display is a common challenge. This article will introduce a solution based on the Uniapp framework to simulate the processing method of Xiaohongshu: for ultra-wide or ultra-high pictures, they are given priority in width or height, and are displayed in the center after scaling equally.

Efficient CSS solution

To avoid image deformation, we can use background-size: contain property of CSS. This property ensures that the background image is fully displayed in the container and is not stretched or cropped. The picture will be scaled equally according to the width and height ratio of the container, keeping the original proportion unchanged.

Here is a specific code example:

 .container {
    width: 500px;
    height: 300px;
    border: 1px solid #000;
    overflow: hidden; /* Hide the portion beyond the container*/
}

.img {
    width: 100%;
    height: 100%;
    background-size: contains;
    background-position: center center; /* center to display */
    background-repeat: no-repeat;
}

Corresponding HTML structure:

<div class="container">
    <div class="img" :style="{backgroundImage: `url(${imageUrl})`}"></div>
</div>

Where, imageUrl is the dynamically bound image URL. overflow: hidden is used to hide the image part that may be beyond the container to ensure the display effect is complete.

Through this method, we can easily realize the adaptive display of images, perfectly solve the problem of inconsistent sizes of the uploaded images by users, and ensure that the images are not stretched or cropped while maintaining the original proportion and centered display. This method is simple and efficient, and is very suitable for Uniapp development environment.

The above is the detailed content of How to use the uniapp framework to achieve adaptive display of images uploaded by users without stretching or cropping?. For more information, please follow other related articles on the PHP Chinese website!