Wie man Bild reagiert in Twitter-Bootstrap zu stoppen?

Ich benutze Twitter Bootstrap um responsive Layout zu machen. Es funktioniert wie genial.Wie man Bild reagiert in Twitter-Bootstrap zu stoppen?

Es macht Bilder zu reaktionsschnell. Ich brauche einige Bilder müssen nur Breite und Höhe festgelegt werden.

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>

Wie kann ich es machen?

Quelle

2012-10-04 LoganPHP

Ich glaube nicht width = „50“ height = „40“ wird bestätigen, wenn Sie eine Zeitmaschine zurück zu haben 1994. –

@ PJBrunet und warum würde '

@MilchePatern Da bin ich mir ziemlich sicher, dass es sich um HTML 1.x-Code handelt, der als veraltet gilt. Ich würde CSS empfehlen, die Größe von Bildern zu ändern. Vielleicht wird "width =" von alten E-Mail-Lesern verwendet, die mit CSS nicht umgehen können, was bedauerlich ist. –

Endlich gearbeitet.

.fixed_width { 
    height: 40px; 
    width: 50px; 
} 

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>

Quelle

2012-10-05 05:38:03 LoganPHP

oh nett. das ist einfacher als meine Lösung – hajpoj

Sind Sie sicher, dass das funktioniert hat? –

Erstellen Sie eine neue Klasse und legen Sie die Mindesthöhe und die Mindestbreite auf die Breite und Höhe des Bildes fest, das nicht verkleinert werden soll, und fügen Sie diese Klasse diesen Bildern hinzu.

/* css */ 
img.no-resize { 
    min-height: 40px; 
    min-width: 50px; 
} 

/* html */ 

<div class="span1"> 
    <img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"> 
</div>

Quelle

2012-10-05 02:53:04 hajpoj

Ich hoffe wirklich, dass dies nicht der "richtige" Weg ist, es zu tun. Zuallererst soll eine Klasse mehrere Elemente betreffen. Die IDs gelten für bestimmte Änderungen, z. B. für die Dimensionierung eines bestimmten Bilds. Aber was mich mehr stört: Anstatt ein Bild in Ruhe zu lassen (ohne Stil), wird es von Bootstrap angesprochen und dann macht man Bootstrap seltsam zurück, um den Schaden rückgängig zu machen - das scheint keine elegante Lösung zu sein. Und vergisst man nicht die maximale Breite und maximale Höhe? –

Ihren Code überprüfen stellen Sie sicher, dass es nicht funktioniert und es Attribute Bild Breite und Höhe like you did, indem ein Eingriff in das Styling zu beheben:

<div class="span1"> 
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" /> 
</div>

Ihr Bild soll nicht mit, um die Größe Bootstrap, wenn Sie die Attribute für Breite und Höhe korrekt ausfüllen. Die Inline-Attribute haben Vorrang vor CSS.

Ansonsten haben Sie die img Styling von bootstrap.css ÜBERSCHR

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 
    max-width: 100%; 
    /* Part 1: Set a maxium relative to the parent */ 
    width: auto\9; 
    /* IE7-8 need help adjusting responsive images */ 
    height: auto; 
    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}

erstellen CSS-Selektor mit Ihren Vorgaben (Linie ~ 68 Version 2.0.):

/* css */ 
.max-resize-50x40 { 
    max-height: 40px; 
    max-width: 50px; 
} 
.resize-50x40 { 
    height: 40px; 
    width: 50px; 
}

Quelle

2013-01-11 16:32:27

"* Ihr Bild sollte nicht mit Bootstrap skalieren, wenn Sie Breite und Höhe richtig eingegeben haben *" - Fwiw, zumindest in Chrome 53.0.2785.116 m mit Bootstrap v3.3.7, wenn das Browserfenster kleiner als das Bild wird, wird das Bild die Größe ändern, auch wenn die 'height' und' width' explizit gesetzt sind (um klar zu sein, dies ist mit anderen CSS-bedingten Änderungen - weitere Einstellung 'min -width' & height hält es bei kleinerer Größe statisch.) – ruffin

-1

Noch einfacher, Sie sollten in der Lage sein, dem Bild einfach eine generische Klasse hinzuzufügen, damit Sie es für mehrere Bildgrößen verwenden können ...

/* html */ 
<img src="image.jpg" alt="An image" class="fixed-size" /> 

/* css */
img.fixed-size { height: auto; width: auto; }

Ich habe es nicht in IE versucht, aber es funktioniert auf Safari, FF und Chrome.

Quelle

2013-09-10 05:16:52 atype

-1

auf die Antwort von @atype geschrieben hinzuzufügen ich wie folgt setzen würde:

/* html */ 
<img src="image.jpg" alt="An image" class="fixed-size" /> 

/* css */
img.fixed-size { height: auto !important; width: auto !important; }

Quelle

2015-09-23 18:09:22 trev

Wie man Bild reagiert in Twitter-Bootstrap zu stoppen?

Antwort

Verwandte Themen