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列=＆gt;宽度：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查询：

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

响应绝对形象

1 个答案: