帶有兩個按鈕的方形影像縮略圖，用于預覽和洗掉-有解無憂

我還不是最偉大的 UI 設計師。正在努力學習 CSS。有人可以指導我如何獲得這樣的東西：

帶有兩個按鈕的方形影像縮略圖，用于預覽和洗掉

我目前的 CSS：

.container {
  position: relative;
  width: 100px;
  height: 100px;
}

  .container:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0);
  }

  .container:hover::before {
    background-color: rgba(0,0,0,0.5);
  }

  .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .container button {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0;
  }

  .container:hover button {
    opacity: 1;
  }

HTML：

  <AntList Grid="new ListGridType { Gutter = 16, Column = 6 }" DataSource="this.ImgUrls">
    <ListItem>
      <div class="container">
        <img src="@context" alt="avatar" style="width: 100%" />
        <Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
        <Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
      </div>
    </ListItem>
  </AntList>

目前它看起來像這樣：

帶有兩個按鈕的方形影像縮略圖，用于預覽和洗掉

主要問題是如何使縮略圖始終為方形，影像填充整個縮略圖空間（無論實際圖片的大小和解析度如何），將兩個按鈕彼此對齊。

uj5u.com熱心網友回復：

最簡單的解決方案之一是使用背景影像而不是影像。您必須將此程序調整到您現有的代碼中，但它會起作用。

.container {
  position: relative;
  width: 100px;
  height: 100px;
   background-image: url('https://i.stack.imgur.com/LoxY4.jpg');
  background-size: cover;
  background-position: center center;
}

  .container:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0);
  }

  .container:hover::before {
    background-color: rgba(0,0,0,0.5);
  }

  .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .container button {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0;
  }

  .container:hover button {
    opacity: 1;
  }

  <AntList Grid="new ListGridType { Gutter = 16, Column = 6 }" DataSource="this.ImgUrls">
    <ListItem>
      <div class="container">
        <Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
        <Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
      </div>
    </ListItem>
  </AntList>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392784.html

標籤：html css 图片

上一篇：我似乎無法更改或洗掉的表中的隨機空間

下一篇：懸停和活動時的CSS下劃線影片