Remove attributes "height" and "width" of the image tag
Solution 1
It's not possible to remove the height or width image attributes with typoscript.
But you could override it with CSS in order to create a responsive website.
img {
height:100% !important;
width:100% !important;
}
Solution 2
Call an image tag in document.ready function.
$('img').removeAttr('width').removeAttr('height');
Solution 3
FYI: There is no way to remove this with typoscript. The width
and height
attribute is hardcoded in sysext/cms/tslib/class.tslib_content.php
function cImage
. (Typo3 4.7)
Solution 4
Use jquery
set an id to your image object:
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />
$('#myimage').removeAttr("height").removeAttr("width");
here is alternative javascript code:
var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
Solution 5
To remove the effects of fixed width and/or height attributes without actually removing these attributes you can set them back to "auto" in your CSS definitions:
img {
height: auto !important;
width: auto !important;
}
I suggest to do that only for the img tags where you really need the pictures to be fluid. This could be done by adding an id or class to the img tags or any surrounding tag.
E.g. if your fluid images are located in a wrapper div with class "fluid_pics" you could use:
.fluid_pics img {
height: auto !important;
width: auto !important;
}
Often you will only need to set the height back to auto, as the width is already overwritten to be 100% by your framework (e.g. Twitter Bootstrap).
alienlebarge
Updated on July 09, 2022Comments
-
alienlebarge almost 2 years
In order to create a responsive website with Typo3 and Twitter Bootstrap, I would like to remove the height and width attributs of images
Here's how images are generated in Frontend via content element of type text & image and image
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />
I would like to remove the dimension attributes and get this:
<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />
Can anyone help me ?
-
alienlebarge almost 12 yearsI would have preferred a solution via typoscript. But I will test it in jQuery. I had not thought of jQuery. I will test it.
-
Mennan almost 12 yearsi suggested to use jquery , wont be sorry
-
Mateng over 10 yearsA pity that it takes developers so long to get rid of web 1.0 habits.
-
Dylan Valade over 10 yearsWith Bootstrap you may want to also add the
img-responsive
class to the images at the same time.$('img').removeAttr('width').removeAttr('height').addClass('img-responsive');
-
Naga almost 10 yearsI have come across the same issue in order to keep original size of the new image the width & height of old attributes to be removed jquery way is [here][1] by setting 100% !important in css you are telling browser to set the img size 100% relative to its parent irrespective of its original size which I guess is not the right way to do [1]: w3schools.com/jquery/html_removeattr.asp
-
Ole about 9 yearsIn my opinion this is the best approach. No javascript required, and things like auto-scaling in combination with max-width still work. Thanks!
-
uTILLIty almost 8 yearsI am not able to get this to work with T3 7.6 - do both scripts go in the SETUP section of my template?
-
chrisfish almost 8 years@uTILLIty I edited the answer with hints, where the snippets have to be placed.