带有背景+填充的自适应图像

Question

我有很多图标图像，但是我需要每个图标都有一个框架，最重要的是，我需要它们具有响应能力

我需要它的最终示例（Adobe XD）

注意：框架应该是固定/唯一的，只有动态的东西才是里面的图标

我到目前为止的代码

.special-icon {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
  padding: 3rem;
  position: relative;
  background-image: url('https://yungsilvadev.s3.amazonaws.com/icon_wrap.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<div class="special-icon">
    <img src="https://yungsilvadev.s3.amazonaws.com/hat.svg">
  </div>

Answer 1

您可以将 cover 用于背景图片，这样它将随着设备显示的变化自动调整大小并进行裁剪

background-size: cover;

完整示例：

.frame{
  width:20%;
  height:200px;
  padding: 3rem;
  margin:10px;
  background-size: cover;

}
.row{
  display:flex;
  justify-content: space-between;
}
.f1{
    background-image: url(https://picsum.photos/id/103/500/500);
}

.f2{
    background-image: url(https://picsum.photos/id/1003/500/500);
}

.f3{
    background-image: url(https://picsum.photos/id/1011/500/500);
}

<div class="row">
    <div class="frame f1"></div>
    <div class="frame f2"></div>
    <div class="frame f3"></div>
  </div>

Answer 2

工作直到〜82px，希望足够：D

.special-icon {
  background-image: url('https://yungsilvadev.s3.amazonaws.com/icon_wrap.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

img {
  width: 35%;
  padding: 20%;
}

.resizable {
  width: 50%;
  border: 1px dotted black;
  overflow-x: scroll;
  resize: horizontal;
}

.floaty .special-icon {
  float: left;
}

<div class="resizable">
  <div class="special-icon"  style="width: 100%;">
    <img src="https://yungsilvadev.s3.amazonaws.com/ruler.svg">
  </div>
</div>
  
<div class="floaty">
  <div class="special-icon" style="width: 300px; height: 300px;">
    <img src="https://yungsilvadev.s3.amazonaws.com/hat.svg">
  </div>
  
  <div class="special-icon" style="width: 200px; height: 200px;">
    <img src="https://yungsilvadev.s3.amazonaws.com/ruler.svg">
  </div>

  <div class="special-icon" style="width: 100px; height: 100px;">
    <img src="https://yungsilvadev.s3.amazonaws.com/hat.svg">
  </div>

</div>