html - 响应式绝对图像

Question

我已经搜索了一段时间，但找不到任何我需要的东西。我目前正在我的第一个网站上工作，需要帮​​助。我正在尝试创建一个绝对定位的图像网格，但也响应不同尺寸的显示器，因为它是一个 Intranet 解决方案。

HTML:

<a href="google.com">
    <img src="M.png" alt="A" class="image2" align="left" style=";">
</a>

<a href="google.com/">
    <img src="kjsa.jpg" alt="C" class="image3" align="left" style="max-width:100%;">
</a>

<a href="google.com">
    <img src="/example.png" alt="b" class="image4" align="left" style="max-width:100%;">
</a>

<a href="google.com">
    <img src="exmple.png" alt="C" class="image5" align="left" style="max-width:100%;">
</a>

<a href="google.com">
    <img src="example.png" alt="e" class="image6" align="left" style="max-width:100%;">
</a>

<a href="google.com">
    <img src="example.png" alt="e" class="image7" align="left" style="max-width:100%;">
</a>

CSS:

img.image2 {
    position: absolute;
    z-index: 10;
    left: 33.15%;
    max-width: 100%; 
}

img.image3 {
    position: absolute;
    z-index: 10;
    left: 44.21%;
    max-width: 100%; 
}

img.image4 {
    position: absolute;
    z-index: 10;
    left: 55.26%;
    max-width: 100%; 
}
img.image5 {
    position: absolute;
    z-index: 10;
    left: 33.15%;
    top: 400px;
    max-width: 100%; 
}

img.image6 {
    position: absolute;
    z-index: 10;
    left: 44.21%;
    top: 400px; 
    max-width: 100%; 
}

img.image7 {
    position: absolute;
    z-index: 10;
    left: 55.26%;
    top: 400px;
    max-width: 100%; 
}

本质上，我需要图片相对于屏幕和浏览器大小保持相同的位置，但我需要它们能够根据显示器分辨率调整大小。

我怎样才能做到这一点？

Answer 1

为什么要使用绝对位置？!!!!!! 如果你想要 GRID 布局和响应式设计，你可以使用相同的代码:
HTML :

    <div class="col">
      <a href="google.com">
        <img src="example.png" class="img">
      </a>
   </div>
    <div class="col">
      <a href="google.com">
        <img src="example.png" class="img">
      </a>
   </div>

CSS :(如果你有 5 列 => 宽度:100/5 = 17%)

* , *::after , *::before{
   box-sizing : border-box;
}
.col{
    width    : 17%;
    margin   : 0 1%;
    overflow : hidden;
    float    : left;
}
 a{
     display : inline-block;
 }
.img{
   width     : 100%;
   height    : auto;
   max-width : 100%;
}

之后如果你想为其他设备设置你可以使用媒体查询:

@media screen and (min-width: 62em) { /** 1em = 16px **/
    .col{
      width : 45%;   
      .....
    }
    .....
}