如何使這一行圖片在CSS中響應？

在的this website底部我有標識的一排。它在桌面瀏覽器上看起來非常好，只要您不調整瀏覽器窗口大小即可。而且在移動設備上查看時一點也不敏感。如何使這一行圖片在CSS中響應？

下面是標識的行HTML代碼：

<!-- 1st row of logos --> 
     <div id="clientlogosrow"> 
     <img src="images/logo-answerables.png" class="imagessmaller" /></a> 
     <img src="images/logo-mfs.png" class="images" /></a> 
     <img src="images/logo-wolf.png" class="images" /> 
     <img src="images/logo-JA.png" class="imagessmallerv2" /> 
     <img src="images/logo-JOC.png" class="imagessmallerv2" /> 
    </div> 

<!-- 2nd row of logos --> 
     <div id="clientlogosrow"> 
     <img src="images/logo-icl.png" class="imagessmaller" /> 
     <img src="images/logo-pm.png" class="imagessmaller" /> 
     <img src="images/logo-TD.png" class="imagessmaller" /> 
     <img src="images/logo-kl.png" class="imagessmaller" /> 
     <img src="images/logo-mmt.png" class="imagessmaller" /> 
     </div>

這裏的CSS：

/* Client Logos */ 
.images { 
display: inline; 
margin: 5px; 
padding: 0px; 
vertical-align:middle; 
height:85px; 
} 

.imagessmaller { 
display: inline; 
margin: 10px; 
padding: 0px; 
vertical-align:middle; 
height:55px; 
} 

.imagessmallerv2 { 
display: inline; 
margin: 10px; 
padding: 0px; 
vertical-align:middle; 
height:35px; 
} 

#clientlogosrow { 
display: block; 
margin: 0px; 
padding: 0px; 
position: relative; 
top: 7px; 
height: auto; 
overflow-y: hidden; 
overflow-x:auto; 
word-wrap:normal; 
white-space:nowrap; 
}

你會發現一些不同類別的圖像（「images」，「imagesmsallerv2」），我這樣做是因爲我在CSS中自動調整大小的嘗試導致真正不成比例的標誌大小。我猜這不是錯誤的做法，所以請讓我知道是否有更簡單的方式來佈置響應式徽標行！

來源

2017-10-28 AssaultCactus

你怎麼想你的廣告圖標的列表的行爲在較小的屏幕？ – Flying

我希望他們能夠保留自己的大小，但「重疊」的可視面積縮小或增大（我希望是有道理的） – AssaultCactus

請把我的回答如下 – Flying

你可以達到你的目的，通過使用Flexbox的佈局更加容易。看一下這個例子，我已經鏈接了你的標識。以完整尺寸打開並嘗試調整瀏覽器視圖的大小。希望它是你想要的。標識尺寸也可以針對較小的屏幕進行調整，現在我已經保留了您網站的所有尺寸。

body { 
 
    background-color: darkgrey; /* Just to be able to see white logotypes */ 
 
} 
 

 
.logotypes { 
 
    max-width: 700px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.logotypes img { 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    width: auto; 
 
    max-width: 230px; 
 
    max-height: 85px; 
 
}

<div id="clientlogosrow" class="logotypes"> 
 
    <img src="https://twotailsmedia.com/images/logo-answerables.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-mfs.png" class="images"> 
 
    <img src="https://twotailsmedia.com/images/logo-wolf.png" class="images"> 
 
    <img src="https://twotailsmedia.com/images/logo-JA.png" class="imagessmallerv2"> 
 
    <img src="https://twotailsmedia.com/images/logo-JOC.png" class="imagessmallerv2"> 
 

 
    <img src="https://twotailsmedia.com/images/logo-icl.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-pm.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-TD.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-kl.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-mmt.png" class="imagessmaller"> 
 
</div>

來源

2017-10-28 17:48:00 Flying

感謝您嘲笑這段代碼！但是，響應式視圖仍然不起作用。截圖：https://imgur.com/a/Txoe9 的切斷，圖標不會重新排列/重新堆疊留在視圖當觀看空間的變化牆紙。 – AssaultCactus

我再次嘗試了你的代碼，現在它似乎在工作。我一定在第一次做錯了事情。感謝您對此的幫助！ – AssaultCactus

嘗試從#clientlogosrow規則刪除white-space: nowrap;所以你允許它使用中斷。

nowrap空格的序列將崩潰爲單個空格。文本將永遠不會換行到下一行。該文本在同一行上繼續直到
標籤遇到

https://www.w3schools.com/cssref/pr_text_white-space.asp

來源

2017-10-28 17:31:46

試了一下看看例子。稍微改進，但在移動視圖中仍然不太好：https：//imgur.com/a/DCctE。奇怪的是，Chrome在Chrome瀏覽器的響應式測試查看器中看起來很好，但在實際的Android設備上看起來不太好（使用Nexus 5x進行測試）。 – AssaultCactus

只是爲了確保，你刷卡刷新了嗎？因爲它看起來仍然在使用nowrap值。也許它的緩存。 –

是的，我想也一樣，並做了一個刷新。不幸的是，看起來還是一樣。 – AssaultCactus

如何使這一行圖片在CSS中響應？

回答

相關問題