Image Größe auf Handy ändern

Question

Ich versuche, die Bilder auf meiner kleinen Seite funktioniert direkt auf dem Handy. Im Moment ändern sie sich nicht. Ich habe auch schon versucht, hier nach einer Antwort zu suchen, bevor ich das gepostet habe, aber keine der Lösungen, die ich gefunden habe, hat für mich funktioniert.

Die URL der Website unter: crypto.mmo-spellbook.com/app/

ich einfach die Menüleiste mit den Symbolen auf Handy, um die Größe will. Ich habe versucht, Bootstrap zu verwenden und das img-responsive Tag hinzuzufügen, aber das hat nicht funktioniert (also habe ich es entfernt), ich habe auch versucht, ein div um das Menü mit einer Breite von 100% hinzuzufügen, aber das hat auch nicht geholfen. Ich habe den max-width als auch gesetzt:

img { 
    height: auto !important; 
    max-width: 100% !important; 
} 

In meinem Kopf ich so auch haben:

<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, user-scalable=0"> 

Welche die iframe richtig die Größe macht, aber nicht die eigentlichen Bilder. Die Seite ist sehr einfach, aber es scheint, dass die Bilder nicht verkleinert werden sollen.

Hilfe ist willkommen.

Danke!

Answer 1

Verwenden flex und aktualisieren Sie Ihre CSS wie folgt aus:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #353c48; 
    display:flex; 
    flex-wrap: nowrap; 
} 
img { 
    max-width: 100%; 
} 

entfernen Sie alle Stile aus dem li (ohne Schwimmer erforderlich)

Und wenn Sie die Elemente hinzufügen, um dieses CSS zentrieren möchten:

li:first-child { 
    margin-left:auto; 
} 
li:last-child { 
    margin-right:auto; 
} 

Voll Code:

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px 0; 
 
    overflow: hidden; 
 
    background-color: #353c48; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
ul li img { 
 
    max-width: 100%; 
 
} 
 

 
ul li:first-child { 
 
    margin-left: auto; 
 
} 
 

 
ul li:last-child { 
 
    margin-right: auto; 
 
}

<div class="coinpot-menu"> 
 
    <ul> 
 
    <li> 
 
     <a href="https://coinpot.co" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/coinpot.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://moonbit.co.in/?ref=9abae445ca39" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moonbitcoin.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://moonliteco.in/?ref=2f13109a9e5f" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moonlitecoin.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://moondoge.co.in/?ref=02dfddfecb26" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moondogecoin.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://moondash.co.in/?ref=5E3DE726BCCB" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moondashcoin.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://bonusbitcoin.co/?ref=CD8C7FD96B63" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/bonusbitcoin.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://bitfun.co/?ref=86E32F2DCAFA" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/bitfun.png"></a> 
 
    </li> 
 
    <li> 
 
     <a href="http://crypto.mmo-spellbook.com/app/help.html" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/questionmark.png" height="100%" width="100%"></a> 
 
    </li> 
 
    </ul> 
 
</div>