Question

我想将图像放在其他图像中，如下所示

我使用以下代码制作了它。

HTML

  <div class="col col-span-1" style="position : relative">
      <div>
        <img style="max-width:800px; max-height:800px; 
                    width:100%; height:100%;" 
             src="https://i.imgur.com/iY3x1GC.png">
      </div>
      <div style="position : absolute; top: 80%; left:50%; ">
        <img src="https://i.imgur.com/C1uxk6Y.png" 
             style="width: 100%; height: 100%;">
      </div>
    </div>

CSS

.col-span-1 {
    flex-basis: 8.3333%;
}
.col {
    flex: 1 1 8%;
    margin: 0 0 0.5rem 0;
    padding: 0.5em 10px;
    box-sizing: border-box;
}

myJSFiddle

我使用宽度：100％

使div1的图像响应宽度

但我不知道如何使div2的图像相对于div1的图像向上/向下缩放。

我想这样做。

- ＆gt;（响应）

我希望尽可能使用CSS，提前谢谢。

Answer 1

要调整小图像的大小，将它们放在小容器中并用另一个元素推动该小容器是一个干净的解决方案。在我看来，表格很棒。

这是代码;

<div class="col col-span-1" style="position : relative">
  <div>
    <img style="max-width:800px; max-height:800px;width:100%; height:100%;" src="https://i.imgur.com/iY3x1GC.png">
  </div>
  <table style="position: absolute;top: 75%;width: 85%;">
    <tbody>
      <tr>
        <td style=" width: 60%;"></td>
        <td style=" max-width: 90px; width: 39%;">
          <div style="">
            <img src="https://i.imgur.com/C1uxk6Y.png" style="width:100%; height: 100%;">
          </div>
        </td>
      </tr>
    </tbody>
  </table>    
</div>

Answer 2

这是代码

HTML：

<div id="container">
    <div id="main_image">   <img style="max-width:800px; max-height:800px; width:100%; height:100%;" src="https://i.imgur.com/iY3x1GC.png"></div>
    <div id="overlay_image"> <img src="https://i.imgur.com/C1uxk6Y.png" style="
    width: 100%;
    height: 100%;
"></div>
</div>

的CSS：

#container{
    position: relative;
    width: 100%;
    height: 100%;
}
#main_image{
    width: 100%;
    height: 100%;

}
#overlay_image{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: auto;
    height: auto;

}
@media screen and (min-width: 601px) {
  #overlay_image{
    width:40px;
    }
}
@media screen and (max-width: 600px) {
  #overlay_image{
    width:20px;
    }
}

CSS如何使图像大小相对于父级？

2 个答案: