Resize image in Javascript Div Class without css

Question

I have a java script that I embedding into our cms. The css is externally hosted so cannot change. But wondered how to change the size of the image within the javascript divclass if possible?

The image is huge and I would like to resize so that the width is proportional against the height

<div class="candid-embed" data-host="api.getcandid.com" data-id="c99469e1-5476-4aaa-90eb-b7d940882f0f" data-ids="172262754475694502" data-theme=""></div><script async defer src="//api.getcandid.com/scripts/embed.js"></script>

css

element.style {
border:0;
border-radius:4px;
box-shadow:rgba(0, 0, 0, 0.498039) 0 0 1px 0px, rgba(0, 0, 0, 0.14902) 0 1px  10px 0;
height:1143px;
margin:1px;
max-width:658px;
overflow:hidden;
width:calc(100% - 2px);

Can you paste the exact CSS being rendered in your browser?. You can get that by right clicking your image and selecting the `Inspect Element` menu. — David R, Jan 10 '17 at 15:23
Eric - So far when I try to add any sizing it appears as static code outside the image — user6716861, Jan 10 '17 at 15:57
So you can't add the css property to the element with js either? — theoretisch, Jan 10 '17 at 16:07
Did the answer of codecount or me solve your problem ? Or do you need something else? — theoretisch, Jan 10 '17 at 17:36

theoretisch · Answer 1 · 2017-01-10T17:35:09.070

I don't know if this is what you want, but you just can add the css inline with js.

document.getElementById("pic").style.width='330px';

<div>
<img id="pic"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/IMG_Mauritius_Roundel.svg/2000px-IMG_Mauritius_Roundel.svg.png">
</div>

This will resize the image width to 330px without to access to the css files. If you that the size depends on the screen with then you can use e.g. 30vw/vh instead of px.

You can see the original size if you delete the js. But it's inline css, so it's not that a good solution.

score 0 · Accepted Answer · answered Jan 10 '17 at 16:28

0

If your looking to resize multiple images try using Array.prototype and getElementsByTagName()

Example:

Array.prototype.slice.call(document.getElementsByTagName("IMG")).forEach(function(e) {
  if ((e.className).indexOf('img-lg') > -1) {
    e.style.width = '300px';
    e.style.height = '300px';
  } else if ((e.className).indexOf('img-md') > -1) {
    e.style.width = '200px';
    e.style.height = '200px';
  } else {
    e.style.width = '100px';
    e.style.height = '100px';
  }
});

<img class="img-sm" src="https://docs.google.com/uc?id=0B5iA7cDj2cjqdlRIWlJTRGJWb00">
<img class="img-md" src="https://docs.google.com/uc?id=0B5iA7cDj2cjqOTRwSUo0N1QzTEk">
<img class="img-lg" src="https://docs.google.com/uc?id=0B5iA7cDj2cjqcXMwTkpaOU5uNTg">

In above example I use a class to determine the size of the image (img-sm is default size).

answered Jan 10 '17 at 16:28

thekodester

668
4
16

Tried both but still no luck. I'm more trying to adjust the height than the width. Using Firebug the image works ok but I am not sure what the exact js should be. – user6716861 Jan 11 '17 at 19:04
Looking at your updated question doesn't look as if you have direct access to the image your loading it using some type of widget? – thekodester Jan 11 '17 at 19:10
Yes it is a widget – user6716861 Jan 11 '17 at 19:16
Yeah look deeper at the generated code the image is inside an iFrame hosted on a different network. The only thing you could do is change the size of the entire widget. – thekodester Jan 11 '17 at 19:17
Yeah when I try to access the content of the iFrame I get: `Blocked a frame with origin from accessing a cross-origin frame` so it blocking me from changing it contents. – thekodester Jan 11 '17 at 19:29
No idea how to change it but will keep going! I can change it fine in firebug but that's not ideal – user6716861 Jan 11 '17 at 19:31
Yes firebug, chrome, and even IE well let you change it with their developer tools cause your see the final render content, but before that content is rendered it being populated with a ``. – thekodester Jan 11 '17 at 19:36
This issue provided more information: http://stackoverflow.com/questions/9393532/cross-domain-iframe-issue – thekodester Jan 11 '17 at 19:37
yeah, I guess the other option is to host the css on our own site and then change that way – user6716861 Jan 11 '17 at 19:38
Yes if you have direct access to the core code then hosting it your self is best option (if you don't have access to the other domain). – thekodester Jan 11 '17 at 19:41
Got it in the end – user6716861 Jan 11 '17 at 19:54

Resize image in Javascript Div Class without css

2 Answers2