響應絕對圖像

我一直在尋找一段時間，但找不到任何正是我需要的東西。我目前在我的第一個網站上工作，需要幫助。我試圖創建一個絕對定位的圖像網格，但也響應不同大小的監視器，因爲它是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%; 
}

從本質上說，我需要的圖片保留在相對於屏幕和瀏覽器大小相同的位置，但我需要他們能夠根據顯示器分辨率調整大小。

我該如何做到這一點？

來源

2016-11-07 Jeace Santiago

給[引導]（HT tp：//getbootstrap.com/）一看。它對響應式頁面設計非常有用，並且易於學習。這將爲您節省大量時間與您正在嘗試做的事情。 – Sam07

擺脫所有這些絕對位置，並使用flexbox。你的圖像和盒子本身會有反應。 – Korgrue

爲什麼你使用絕對的位置？如果你想有網格佈局以及響應設計可以有相同的代碼，如：
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%; 
     ..... 
    } 
    ..... 
}

來源

2016-11-07 18:11:22 Mekaeil

響應絕對圖像

回答

相關問題