CODEWITHSUNDEEP
javascript
user6716861
user6716861

Reputation: 15

Resize image in Javascript Div Class without css

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);

Upvotes: 1

Views: 143

Answers (2)

theoretisch
theoretisch

Reputation: 1728

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.

Upvotes: 1

thekodester
thekodester

Reputation: 668

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).

Upvotes: 0

Related Questions