wie Banner ansprechbar und skalieren richtig machen - indem sie nicht Hintergrund Eigenschaft

Question

mit Gibt es eine Möglichkeit ich ein Banner anspricht und den Abbildungsmaßstab mache properly..ie die Höhe

<div class="banner"> 
    <img src="/img/banner1.png" alt="Banner"> 
</div> 

I mit folgenden Struktur gleich bleibt wissen mit css können wir das Bild Hintergrundbild für Klassenbanner machen. Aber ist es möglich, die Wirkung von

background-position, background-size 

mit obiger Struktur zu haben.

Answer 1

entfernen img versuchen diese CSS zu Ihrem .banner hinzuzufügen:

.banner { 
    background-image: url('/img/banner1.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

Answer 2

Versuchen Hinzufügen der folgenden Klasse zu Ihrem Bild:

<img src="/img/banner1.png" width="460" height="345" class="responsive"> 

CSS:

.responsive { 
    width: 100%; 
    height: auto; 
} 

auch. .. Ersetzen Sie die Attribute width und height durch die Größe von banner1.png.

Wenn Sie nichts von Bootstrap wissen, überprüfen Sie das Responsive Framework, eine einfache Klasse "img-responsive", die alle Bilder anspricht.