How to get the largest square area of a picture in vue?

<img class="previewer-demo-img" v-for="(src11,i) of item.images"  :src="src11" alt="" :key="i">

because you want to present a picture in the ninth house format of Wechat"s moments, but the original picture is of different sizes, get an area in the middle of the picture, make a thumbnail, click and then show the original image.

ask for advice!

, supplement,

  .bg{
      font-size:30px;
      background-color:-sharpcccccc;
      background-size:cover;
      width: 200px;
      height:200px;
      overflow:hidden;
   }
<div class="bg" style="background: url("../common/image/normal-head.png") no-repeat center;"></div>


<img src

Vue.js css css3

Mar.17,2021

it is recommended to use the background image to limit the size of the div and set the position of the background image

I also recommend the scheme of the background picture mentioned above

img, max-width and max-height keep the picture undeformed

Previous: How can layabox build a reasonable directory structure?

Next: Local test was successful, but failed to open the file after uploading the server (fopen and file_exists)

Animation effect of vue
1, the demand is to have a list of pictures. After right-clicking, the current picture will zoom out and disappear, and the following picture will automatically slide to fill the position. I found that after the vue data was updated, the view was refres...

Vue.js css css3 javascript

Jun.30,2022