2016-05-09 14 views
0

Ich versuche, mein Bild responsive.in Web-Version sieht es gut aus, aber wenn ich versuche, mein Bild in der mobilen Version zu sehen, dann ist es nicht in responsive. Bitte helfen Sie mir, die Lösung zu finden. hier ist.Wie man Bild reagiert

mein HTML-Code

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body> 
    <div class="banner-bg"> 
     <div class="banner-bg-item"><img src="img/banner-bg-1.jpg" style="max-width: 100%;" alt=""></div> 
     <div class="banner-bg-item"><img src="img/banner-bg-2.jpg" style="max-width: 100%;" alt=""></div> 
     <div class="banner-bg-item"><img src="img/banner-bg-3.jpg" style="max-width: 100%;" alt=""></div> 
     <div class="banner-bg-item"><img src="img/banner-bg-4.jpg" style="max-width: 100%;" alt=""></div> 
    </div> 
    </body> 
</html> 

und mY CSS-Datei ist

#banner .banner-bg .banner-bg-item .img{ 
    max-width: 100%;height: auto;display:block;width:100%; 
} 

ich auch mit Bootstrap bin versuchen und meine Bildklasse img-responsive aber seine nicht funktioniert machen .. s o Bitte helfen Sie mir die Lösung

+0

was ist das problem..small Bild oder horizontale Scroll ... wie es nicht reagiert? –

+2

Responsive ist ein vager Begriff, der nur bedeutet "passt sich an verschiedene Bildschirmgrößen an". Was, * spezifisches * Verhalten erwarten Sie und wie unterscheidet sich das von dem, was tatsächlich passiert? – Quentin

+0

Ich möchte ein vollständiges Bild im Handy, aber in Chrome Entwickler-Tools, wenn ich es mobil mache dann Bild schneidet. zeigt nicht voll und geht vertikal rein. –

Antwort

0

Statt max-width zu finden, setzen diese beiden:

<img width=100% height=100% /> 
Verwandte Themen