Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Xiao Liu is responsible for the development of embedded H5 in the enterprise Micro. According to the consistent practice of this project, only the mobile terminal design draft of UI has been issued. There is an attachment display component in today’s page. When you do not click it, it will be displayed in nine squares just like weibo pictures. (Click and follow the logic of different attachment types.) Simple, right? Liu chi chi do about the same, and then called the product development environment take a look. See the product in the PC micro client to open the page, a horizontal pull, Liu’s components on the horizontal spread out. Ask xiao Liu, the original length and width are written a fixed number of REM. The project itself has been lost in the enterprise micro mobile terminal display, it has not considered sizechange situation… Xiao Liu has not changed for a while.

So I wrote him a demo.

CSS:

    html,
    body {
      padding: 0;
      margin: 0;
    }
    .img-list-wrap {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }
    .img-item-wrap {
      box-sizing: border-box;
      width: 33.33%;
      margin-bottom: 10px;
      padding-left: 5px;
      padding-right: 5px;
    }
    .img-item {
      box-sizing: border-box;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      position: relative;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      display: inline-block;
      object-fit: cover;
    }
Copy the code

HTML:

  <div class="img-list-wrap">
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
Copy the code

Two things are involved:

  • The padding percentage is the width relative to the content area of the container. So we can adapt the square according to this picture.
  • Object-fit (fill, contain, cover, scale-down, none)