Handling Image Distortion in iOS Development: Image Sources, CSS Techniques, and Code Samples

A friend working on iOS asked about image distortion problems, prompting the author to write a technical note that records useful tips and resources for developers.

Image topics are popular, with daily search volumes reaching 50,000; many image libraries add watermarks, which can affect multi‑platform publishing.

The author lists three main image sources:

Lorem Picsum (online random high‑definition images)

Usage is straightforward; the following URLs can be used to obtain random, specific, grayscale, or blurred images:

# Random image 200×300
https://picsum.photos/200/300
# Image with specific ID (237)
https://picsum.photos/id/237/200/300
# Grayscale image
https://picsum.photos/200/300?grayscale
# Blurred image
https://picsum.photos/200/300/?blur=2

The author also recommends the Pinbox online collection plugin for convenient bookmarking.

pixabay (high‑definition free image library)

Pixabay offers over 2.4 million high‑quality photos and videos for various design scenarios.

iconfont (Alibaba icon library)

Iconfont provides a rich set of vector icons with download, online storage, and format conversion features.

Project code is hosted on Gitee; the author demonstrates how to choose appropriate image formats (jpg for colorful scenes, gif for complex animation, png for transparency, webp for lightweight usage) and fetch image data:

# Fetch image resource data (sizes may vary)
initFetchImgSource() {
    fetch('http://picsum.photos/v2/list?limit=9')
        .then(res => res.json())
        .then(list => {
            console.log('我是图片资源数据 ****', list)
            this.imgList = list
        })
}

When a fixed container size is used, images may appear distorted. The key CSS property to control this is object-fit , with browser compatibility considerations.

Example grid layout and image styling to preserve aspect ratio:

.container{
    display: inline-grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px; 
    border: 1px solid #58546b; 
}
.item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #58546b;
  img {
    width: 100%;
    height: 100%;
    /* keep original aspect ratio */
    object-fit: contain;
    opacity: 0.85;
    transition: all 3s;
    &:hover{
      object-fit: cover;
      opacity: 1;
    }
  }
}

Large images may load slowly; a loading animation can improve perceived performance:

@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.item {
  text-align: center;
  border: 1px solid #58546b;
  position: relative;
  transition: .3s color, .3s border;
  &.loading::before {
    color: #403b3b;
    content: " ";
    height: 70px;
    width: 70px;
    font-size: 12px;
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 45px);
    border: 10px dotted currentcolor;
    border-radius: 50%;
    animation: 2s loading linear infinite;
  }
}

To handle broken image URLs, a default placeholder can be shown:

<img :src="item.loadError ? 'https://storyset.com/images/404/8.svg' : (item.download_url + (inx > 5 ? '1' : ''))" alt="图片" @load="imgLoaded($event,item)" @error="imgLoadError($event,item)">

Vue template for rendering the image list:

<div v-for="(item, inx) in imgList" :key="item.id" :class="[`item img-item-` + (inx + 1), item.loading ? 'loaded' : 'loading']">
    <img :src="item.download_url" alt="图片" @load="imgLoaded($event,item)">
</div>

In conclusion, image distortion mainly stems from mismatched container and source dimensions; collaboration with UI designers to adjust image sizes or container ratios, or using CSS tricks like object-fit , can greatly improve user experience.