<image width> vs CSS Breite

Lets sagen, dass ich einen Code wie dieses:<image width> vs CSS Breite

img { 
 
    width: auto; 
 
}

<img src="blah.jpg" width="400">

Und sagen lässt die blah.jpg1000px breit ist. Der HTML-Code stammt von Drittanbieter-Software, daher kann ich ihn nicht ändern. (Aber ich kann es mit CSS auswählen).

Ich möchte das Bild so weit anzeigen, wie es im img-Tag deklariert ist, aber ich kann das CSS width: auto nicht löschen.

Ich kann jedoch diese CSS-Regel mit dem, was ich will, überschreiben.

EDIT Ist es irgendwie möglich, das Bild mit einer Breite anzuzeigen, die im Image-Tag definiert ist?

Quelle

2016-07-07 nbar

UPDATE:

Der HTML img-Tag wird mit 3rd-Party-Software erzeugt

Ist es irgendwie möglich, die das Bild mit einer Breite = Breite in Bild-tag definiert angezeigt werden?

Nein, das ist mit CSS nicht möglich.

ALTE Antwort

ja, es wird mit max-width

nicht width HTML-Tag verwenden, weder Inline-Styles

img { 
 
    width: auto; 
 
    max-width: 400px; 
 
}

<img src="//lorempixel.com/1000/200">

Leider weiß ich nicht die Breite des Bildes in der CSS-Datei. So kann ich nicht festgelegt, die Breite oder max-width auf 400

Das ist, was Klassen und IDs sind für (wenn Sie nicht wissen, wie die neue CSS 3 verwenden Selektoren)

so gilt für Beispiel einer Klasse und setzt nur die max-width zu dieser Klasse, so etwas wie diese:

img { 
 
    width: auto 
 
} 
 
.w400 { 
 
    max-width: 400px 
 
}

<img class="w400" src="//lorempixel.com/1000/200"> 
 

 
<img src="//lorempixel.com/1000/200">

Quelle

2016-07-07 13:16:36 dippas

Dies ist eine hervorragende Lösung Stile Inline (obwohl letzterer würde auch die ursprüngliche Beitragsausgabe lösen). Ich würde weiter gehen und empfehlen, dass das OP eine Klasse auf die Bilder anwendet, die sie auf diese Weise verändern wollen, um eine weitere Zukunftssicherung anzubieten, sollten sich ihre Bedürfnisse ändern. –

Leider kenne ich die Breite des Bildes in der CSS-Datei nicht. Also kann ich die Breite oder die maximale Breite nicht auf 400 setzen. Wenn ich irgendwie "Breite: Auto" löschen könnte, würde es funktionieren. – nbar

@nbar Entschuldigung, was? Sie kennen die Breite des img in CSS nicht? sich darum kümmern zu erklären? – dippas

Sie kann perha ps fügen eine andere Stilklasse hinzu und verwenden sie für dieses Bild unabhängig von den Werten für Höhe und Breite, die Sie angeben möchten. Auf diese Weise erhalten Sie die vorhandenen Stilinformationen intakt und haben saubereres HTML.

Quelle

2016-07-07 13:24:54

Ich glaube nicht, dass dies mit CSS möglich ist. Ich kann mir sicherlich keinen Weg vorstellen, es zu tun.

Sie ein sehr einfaches Stück Javascript erstellen könnte Inline-Styles für jeden img mit einem definierten width Attributen zu erzeugen:

var imgs = document.querySelectorAll('img[width]'); 
 

 
for (var i = 0; i < imgs.length; i++) { 
 
    var widthAttr = imgs[i].getAttribute('width'); 
 
    imgs[i].style.width = widthAttr + 'px'; 
 
}

img { 
 
    width: auto; 
 
}

<img src="http://placehold.it/400x400" width="200"> 
 

 
<img src="http://placehold.it/400x400" width="300">

Quelle

2016-07-07 13:34:36 Turnip

Danke für die Bestätigung. Ich werde eine JS-Lösung machen. – nbar

<image width> vs CSS Breite

Antwort

Verwandte Themen