Entfernen Sie die Attribute "Höhe" und "Breite" das Bild-tag

Zur Erstellung einer responsive website mit Typo3 und Twitter Bootstrap, würde ich mag, um die zu entfernen Höhe und Breite Attribute von Bildern

Hier ist, wie Bilder generiert werden, im Frontend per content-element vom Typ text & Bild und Bild

<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />

Möchte ich entfernen Sie die dimension Attribute und dieses:

<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />

Kann mir jemand helfen ?

wenn jquery ist in Ordnung mit Ihnen, dann sehen Sie sich bitte die api.jquery.com/removeAttr

InformationsquelleAutor alienlebarge | 2012-06-13

3

Es ist nicht möglich, entfernen Sie die Höhe oder Breite der image-Attribute mit typoscript.

Aber könnten Sie überschreiben es mit CSS, um eine responsive website.

img { height:100% !important; width:100% !important; }

Ich habe das gleiche Problem in Ordnung zu halten, original-Größe das neue Bild die Breite & die Höhe des alten Attribute entfernt werden jquery-Weg ist [hier][1] durch die Einstellung 100% !wichtig in css Sie sagen-browser die img-Größe 100% relativ zu seinem Elternteil unabhängig von seiner ursprünglichen Größe, die ich denke, ist nicht der richtige Weg zu tun [1]: w3schools.com/jquery/html_removeattr.asp

InformationsquelleAutor Christian Michael
9

Rufen Sie ein image-tag im Dokument.ready Funktion.
```
$('img').removeAttr('width').removeAttr('height');
```
Mit Bootstrap möchten Sie vielleicht fügen Sie auch die img-responsive - Klasse, um die Bilder in der gleichen Zeit. $('img').removeAttr('width').removeAttr('height').addClass('img-responsive');

InformationsquelleAutor Sundar
6

FYI: Es gibt keine Möglichkeit zu entfernen, diese mit typoscript. Die width und height Attribut ist fest in sysext/cms/tslib/class.tslib_content.php Funktion cImage. (Typo3 4.7)

ok danke ! Also ich will mit jQuery.
Schade, dass es dauert-Entwickler so lange, um loszuwerden, der web-1.0-Gewohnheiten.

InformationsquelleAutor Ivaldi
3

Möglich mit TYPO3 6.2 LTS. Kasse http://forge.typo3.org/issues/49723.

InformationsquelleAutor witrin
2

Jquery

festlegen einer id für Ihr Bild, Objekt:
```
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />

$('#myimage').removeAttr("heigth").removeAttr("width");
```
hier ist die alternative javascript-code:
```
var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
```
Ich hätte lieber eine Lösung über typoscript. Aber testen werde ich es in jQuery. Ich hatte nicht daran gedacht jQuery. Ich werde es testen.
ich schlug jquery verwenden , gewohnt sein, sorry

InformationsquelleAutor Mennan
2

Zur Beseitigung der Auswirkungen des fixed-width und/oder height-Attribute ohne Sie tatsächlich zu entfernen diese Attribute können Sie Sie wieder auf "auto" in Ihrer CSS-Definitionen:
```
img {
    height: auto !important;
    width: auto !important;
}
```
Schlage ich vor, das zu tun, nur mit dem img-tags, wo Sie wirklich brauchen, die Bilder zu flüssig. Dies könnte geschehen, indem ein id oder Klasse des img-tags oder umgebenden tag.

E. g. wenn Ihre flüssige Bilder befinden sich in einem wrapper-div mit der Klasse "fluid_pics", die Sie nutzen könnten:
```
.fluid_pics img {
    height: auto !important;
    width: auto !important;
}
```
Oft werden Sie nur brauchen, um die Höhe auf auto zurück, als die Breite, ist bereits überschrieben wurde zu 100% von Ihrem framework (z.B. Twitter Bootstrap).

In SharePoint 2013, die für mich gearbeitet.
Meiner Meinung nach ist dies der beste Ansatz. Kein javascript erforderlich, und Dinge wie auto-Skalierung in Kombination mit max-width noch arbeiten. Danke!

InformationsquelleAutor Jpsy

TypoScript zu Entfernen "Breite" und "Höhe" - Attribute aus dem Quelltext. TYPO3 CMS 6.1+.

tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_news Beispiel:
News Liste

plugin.tt_news.displayList.image.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

InformationsquelleAutor Errol

1

Wenn Ihr Bild hat eine id oder ein anderes eindeutiges Attribut zugewiesen haben, können Sie dies ganz einfach:
```
var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
```
Ich vermute, es ist ein einzigartiges Attribut: src.

InformationsquelleAutor user2428118
1

Für Typo3 6.2 nach oben Sie können ein benutzerdefiniertes Bild als render-layout
(snippet gehört zum TS-setup):
```
tt_content.image.20.1 {
    layout {
        mylayout {
            # equals default rendering, except width and height removed
            element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
        }
    }
}
```
Aktivieren der benutzerdefinierten layout für css_styled_content (snippet gehört zum TS-Konstanten):
```
styles.content.imgtext.layoutKey = mylayout
```
Sehen https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey
für details auf das BILD cObject.

Ich bin nicht in der Lage, diese arbeiten mit T3 7.6 - beide Skripte gehen Sie in den SETUP Bereich meines templates?
Ich bearbeitet habe, die Antwort mit hinweisen, wo die Ausschnitte gesetzt werden.

InformationsquelleAutor chrisfish

Gibt es eine Lösung für die alten TYPO3s mit TYPOSCRIPT:

stdWrap {
    replacement {
        10 {
            search = /\s+(width|height)="[^"]+"/
            useRegExp = 1
            replace =
        }
    }
}

Verwenden Sie diese stdWrap-TS, wo Ihr Bild gerendert wird.

InformationsquelleAutor Martin Wunderlich

0

es nicht funktionieren, die in 6.1 :/
aber u-CSS:
```
img {
    display: block;
    max-width: 100%;
    height: auto;
}
```
InformationsquelleAutor Sebastian Schmal

Dies ist eine SEHR einfache Lösung mit jQuery. ich fand die Antwort auf wpwizard.net.

Hier ist die URL:
http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/

Hier der jQuery:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

    $('img').each(function(){ 
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });

});
</script>

InformationsquelleAutor Mitch

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.