Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

What is the method for adjusting the width of an image within an iFrame?

Here is my modified version of the paragraph: My task involves calling an image from an index.html file through AJAX, but I don't have access to the file. The image is represented with the following code:

<img src="" width=100>
To manipulate the image using JavaScript, I tried using the following code:

iFrame.contents().find("img").css({ "max-width": "50%", "max-height": "50%" });
However, the resulting HTML showed that the CSS was applied to the image tag:

<img src="" width=100 style="max-width": "50%", "max-height": "50%">
Is there a way to modify just the 'width' attribute without adding a CSS style to the image tag?

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Yes, there is a way to modify just the 'width' attribute without adding a CSS style to the image tag. You can use JavaScript to select all images without width attribute or CSS property and add inline CSS attribute to them. Here is an example code that you can use: 
var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; i++) {
  var img = imgs[i];
  if (img.style.width == "" && img.attributes.width === undefined)
    img.style.width = "100%";
}
This code selects all images without width attribute or CSS property and adds inline CSS attribute to them. The width of the image is set to 100% in this case.I hope this helps! Let me know if you have any other questions.

Sources

Get img tags without width attribute and add inline CSS attribute?Remove attributes "height" and "width" of the image tagHow to set an image's width and height without stretching it?How to maintain aspect ratio using HTML IMG tag
avatar
Tolerim
a month ago
Yes, to change just the width of the image without adding a CSS style attribute, you can use the attr method of jQuery to modify the width attribute of the img tag directly. Here's an example: 
iFrame.contents().find("img").attr("width", "50%");
This will set the width attribute of the img tag to 50%, without adding a style attribute to the tag.
;