Have no alternative

Yesterday, my friend asked me a question about the distortion of picture display. My friend is an IOS developer who knows a little about CSS style. Seeing his helpless look, I felt it was necessary to write down notes for your reference and exchange.

brainwave

By the way inBaidu indexChecked some time, the feeling picture topic still has a big as, the average daily search volume has reached5w, think of their usual use of a variety of maps, is also very toss about, I do not know if we have their owngallery.Gallery application platform? Some platforms upload pictures will haveThe watermarkIf the article is published on multiple platforms, it will have a slight impact…

Gallery upload and use

Get into the business

Do not know everyone to find pictures can not find satisfaction when the trouble? But then it turns out that some pictures are just right to use. I look for pictures mainly have three website platforms, for different application scenarios.

Lorem Picsum online random hd images

It’s also incredibly simple to use

# random pictures 200 300 https://picsum.photos/200/300 # specified ID photo ID as https://picsum.photos/id/237/200/300 # 237 grayscale https://picsum.photos/200/300? get gray access of gray-scale images Fuzzy image grayscale # blur for https://picsum.photos/200/300/? blur=2Copy the code

Finally couldn’t resist amwayPinboxOnline site collection plug-in, with special than the convenience

Pixabay HD gallery

Pixabay has more than 2.4 million high-quality images and videos, making it easy for you to deal with a variety of design scenarios.

Iconfont Ali icon library

Iconfont is a powerful and rich vector icon library, providing vector icon download, online storage, format conversion and other functions.

Project run

You guessed it, the project code is still uploaded on the code cloud, directly reproduces the scene, the code is knocked up, under the slightly popular little knowledge of the picture, generally according to the needs to choose the project more appropriate picture format, JPG for more color scenes, GIF for more complex animation, PNG for translucent scenes, webP is lightweight).

# get photo resources data Image size inconsistent initFetchImgSource () {the fetch (' http://picsum.photos/v2/list? Json ()). Then (list => {console.log(' I am the image resource data ****',list) this.imglist = list})}Copy the code

When the display area is fixed in length and width, the image looks like this before distortion

After processing the effect of key attributes object-fit,Can I use browser compatibility

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

Images tend to load slowly when they are too largeCan be added,Loading animation

HTML template

<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 =" picture "@load="imgLoaded($event,item)" > </div>Copy the code

Animation style

# define animation@keyframes loading {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      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: 2sloading linear infinite; }}Copy the code

When the image path suddenly fails for some reason, you can add the default image to improve the experience

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

Thinking about development

In my opinion, the root cause of picture distortion is that the size of the picture is fixed, and the sharpness of the picture can only be maintained when the size of the picture is enlarged or reduced in equal proportion, such as the original size of the picture: 300*400, but the container is 500*500. In this case, it is impossible to completely cover the container. On the premise of ensuring user experience, UI designers can be coordinated to redesign the picture or change the width and height of the container to adapt. Of course, there must be a better solution, experienced partners, can help correct and improve.