Change Image Size with JavaScript

Change image size with JavaScript

Once you have a reference to your image, you can set its height and width like so:

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

In the html, it would look like this:

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>

Change Image() object dimensions (width and height)

Here's how to scale your image proportionally:

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
    return(Math.min((maxW/imgW),(maxH/imgH)));
}

Usage:

var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/balloon.png";function start(){
  canvas.width=100;  canvas.height=100;
  var w=img.width;  var h=img.height;
  // resize img to fit in the canvas   // You can alternately request img to fit into any specified width/height  var sizer=scalePreserveAspectRatio(w,h,canvas.width,canvas.height);
  ctx.drawImage(img,0,0,w,h,0,0,w*sizer,h*sizer);
}
function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){  return(Math.min((maxW/imgW),(maxH/imgH)));}

body{ background-color: ivory; }canvas{border:1px solid red;}

<h4>Original Balloon image resized to fit in 100x100 canvas</h4><canvas id="canvas" width=100 height=100></canvas>

Change image width/height with Javascript

Simple javascript version, style not required

var element = document.getElementsByName("image1")[0];element.setAttribute('width', 146);element.setAttribute('height', 97);
function big() {  element.setAttribute('width', 183);  element.setAttribute('height', 121);}
function small() {  element.setAttribute('width', 146);  element.setAttribute('height', 97);}

<a href="#"  onMouseOver="big()" onMouseOut="small()">  <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw"></a>

Change image size when clicking on it in javascript

You can simply correct your code like this as you are already getting the needed element inside the function by using this :

function resizeImage(img) {  img.style.width = "500px";  img.style.height = "500px";}

<figure id="image-box">  <img src="https://lorempixel.com/400/400/" alt="Bicycle image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">  <img src="https://lorempixel.com/400/400/" alt="Fantasy image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">  <img src="https://lorempixel.com/400/400/" alt="Helicopter image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">  <img src="https://lorempixel.com/400/400/" alt="Hot Chocolate image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
</figure>

How to change image size with slider?

You can add an eventListener to the range and then apply your logic there to change the dimension of the image.

const slider = document.getElementById('Slider');
slider.addEventListener('input', handleChange);

function handleChange(e) {
  const img = document.getElementById("Elon");
  const {value, max} = e.target;
  img.style.width = `${value*max}px`;
  img.style.height = `${value*max}px`;
}

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

How to change image height and width with javascript

You could use height and width attributes

height="xx" width="xx"

add those attr at

document.write('<img src=myimages[ry] width=xx height=xx> border=0>')

for more info check the reference

change image source while keeping dimensions

You can get the height and width of the original image using jquery's .width and .height. Then you add those height and width css properties to the <img /> tag and change the src of it.

The second image will have the same dimensions as the previous image. For example:

setTimeout(changeImage, 3000);
function changeImage() {  let $image = $(".bact");  let width = $image.width();  let height = $image.height();  console.log(`original width: ${width} height: ${height}`);  $image.css({"height": height, "width": width});  $image.attr("src", "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Mausoleum_Ishrathona06.JPG/320px-Mausoleum_Ishrathona06.JPG");}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="bact" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Mute_swans_%28Cygnus_olor%29_and_cygnets.jpg/640px-Mute_swans_%28Cygnus_olor%29_and_cygnets.jpg" />

How do I change img size on click, and return it to normal on toggle using javascript?

Here's a much simpler example making use of transforms. Just toggle a class on click.

document.querySelector("img").addEventListener("click", function(){
  this.classList.toggle("half");
});

img
{
  transition-duration: 0.4s;
}

img.half
{
  transform: scale(0.5);
}

<img src="https://via.placeholder.com/100x100"/>

---

Related Topics