Supprimer les attributs de la “hauteur” et “largeur” de la balise image

Afin de créer un site web réactif avec Typo3 et Twitter Bootstrap, je voudrais enlever la hauteur et largeur attributs d'images

Voici comment les images sont générées en Frontend via l'élément de contenu de type texte & image et image

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

Je voudrais enlever les attributs de dimension et d'obtenir ceci:

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

Quelqu'un peut m'aider ?

si jquery est bien avec vous, alors s'il vous plaît voir ce api.jquery.com/removeAttr

InformationsquelleAutor alienlebarge | 2012-06-13

3

Il n'est pas possible de supprimer la hauteur ou la largeur de l'image attributs avec typoscript.

Mais vous pouvez le remplacer par du CSS afin de créer un site web réactif.

img { height:100% !important; width:100% !important; }
- J'ai rencontré le même problème, afin de conserver la taille d'origine de la nouvelle image de la largeur & hauteur de vieux attributs être retiré jquery façon est [ici][1] réglage de 100% !important dans le css en vous disant navigateur pour définir le img de la taille de 100% par rapport à son parent, indépendamment de sa taille d'origine, qui je pense n'est pas la bonne façon de le faire [1]: w3schools.com/jquery/html_removeattr.asp
InformationsquelleAutor Christian Michael
9

Appel d'une balise image dans le document.prêt de la fonction.
```
$('img').removeAttr('width').removeAttr('height');
```
- Avec Bootstrap vous pouvez également ajouter le img-responsive classe pour les images en même temps. $('img').removeAttr('width').removeAttr('height').addClass('img-responsive');
InformationsquelleAutor Sundar
6

Pour info: Il n'y a aucun moyen de le supprimer avec typoscript. Le width et height attribut est codé en dur dans sysext/cms/tslib/class.tslib_content.php fonction cImage. (Typo3 4.7)
- ok merci ! Je vais donc aller avec jQuery.
- Dommage qu'il prend les développeurs si longtemps pour se débarrasser du web 1.0 habitudes.
InformationsquelleAutor Ivaldi
3

Ce sera possible avec TYPO3 6.2 LTS. La caisse http://forge.typo3.org/issues/49723.

InformationsquelleAutor witrin
2

Utiliser jquery

définir un id à votre image objet:
```
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />

$('#myimage').removeAttr("heigth").removeAttr("width");
```
ici est la variante de code javascript:
```
var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
```
- J'aurais préféré une solution via typoscript. Mais je vais le tester en jQuery. Je n'avais pas pensé à jQuery. Je vais le tester.
- j'ai suggéré d'utiliser jquery , ne sera pas désolé
InformationsquelleAutor Mennan
2

Pour supprimer les effets de largeur fixe et/ou attributs de hauteur sans les supprimer ces attributs, vous pouvez les mettre sur "auto" dans votre CSS définitions:
```
img {
    height: auto !important;
    width: auto !important;
}
```
Je suggère de le faire uniquement pour les balises img où vous avez vraiment besoin de photos pour être fluide. Cela pourrait être fait par l'ajout d'un id ou une classe pour les balises img ou toute étiquette.

E. g. si votre fluidité des images sont situés dans un wrapper de la div avec la classe "fluid_pics", vous pouvez utiliser:
```
.fluid_pics img {
    height: auto !important;
    width: auto !important;
}
```
Souvent, vous aurez seulement besoin de définir la hauteur de l'arrière de l'auto, comme la largeur est déjà écrasé à 100% par votre cadre (par exemple, Twitter Bootstrap).
- Dans SharePoint 2013, a travaillé pour moi.
- À mon avis c'est la meilleure approche. Pas de javascript requis, et d'autres choses comme de l'auto-scaling en combinaison avec max-width encore du travail. Merci!
InformationsquelleAutor Jpsy

TypoScript pour Supprimer les "largeur" et "hauteur" des attributs à partir du code source. CMS TYPO3 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 exemple:
La Liste Des Nouvelles

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

InformationsquelleAutor Errol

1

Si votre image possède un id ou un autre attribut unique affecté, vous pouvez facilement faire cela:
```
var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
```
- Je devine qu'il existe un unique attribut: src.
InformationsquelleAutor user2428118
1

Pour Typo3 6.2 vers le haut, vous pouvez définir une image personnalisée de rendu de mise en page
(extrait appartient à TS d'installation):
```
tt_content.image.20.1 {
    layout {
        mylayout {
            # equals default rendering, except width and height removed
            element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
        }
    }
}
```
Activer la mise en page personnalisée pour css_styled_content (extrait appartient à TS les constantes):
```
styles.content.imgtext.layoutKey = mylayout
```
Voir https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey
pour plus de détails sur l'IMAGE cObject.
- Je ne suis pas en mesure d'obtenir que cela fonctionne avec T3 de 7,6 faire les deux scripts dans la section CONFIGURATION de mon modèle?
- J'ai édité la réponse avec des notes, où les fragments doivent être placés.
InformationsquelleAutor chrisfish

Il y a une solution pour les vieux TYPO3s avec TYPOSCRIPT:

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

Utiliser cette stdWrap-TS où votre image est rendue.

InformationsquelleAutor Martin Wunderlich

0

il ne faut pas travailler en 6.1 :/
mais u peut utiliser les CSS:
```
img {
    display: block;
    max-width: 100%;
    height: auto;
}
```
InformationsquelleAutor Sebastian Schmal

C'est une solution TRÈS simple avec jQuery. j'ai trouvé la réponse à wpwizard.net.

Voici l'URL:
http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/

Voici le 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

Vous devez vous connecter pour publier un commentaire.