Set picture width to proportional size - javascript

Imagine that you have an image
<img id="imgid" height="15" width="149" src="image.png" alt="[]" />
and you want to change its dimensions to height="30" and width to proportional size. The first part is easy:
document.getElementById('imgid').height=30px;
However, wat about the second part? Is it possible to do something similar to
document.getElementById('imgid').width='auto';
Thanks for the answers.

Just change the css properties instead (included both jQuery and plain JS solutions):
$(document).ready(function() {
$("#resize").click(function() {
$("#test").css("width", "100px");
$("#test").css("height", "auto");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
function resizeImg() {
var el = document.getElementById("test")
el.style.width = "200px"
el.style.height = "auto"
}
</script>
<img id="test" src="https://media.licdn.com/media/p/8/000/1e9/0e5/26e178f.png" width="323" height="110">
<br>
Resize jQuery
Resize plain JS
</body>

As per documentation
width
The intrinsic width of the image in pixels. In HTML 4, either a
percentage or pixels were acceptable values. In HTML5, however, only
pixels are acceptable.
Use style properties instead
document.getElementById('imgid').style.height="30px";
document.getElementById('imgid').style.width='auto';

It should be style.height and style.width. Check below snippet for reference.
document.getElementById('imgid').style.height = '90px';
document.getElementById('imgid').style.width = 'auto';
<img id="imgid" height="180" width="240" src="https://www.joomlack.fr/images/demos/demo2.jpg" alt="" />

This will solve your problem if I understand correct your problem:
img {
max-height: 30px;
width: auto;
}

Related

put multiple image-before-after section with jquery

I am trying to implement before-after image comparison by jquery below.It takes two images and shows the comparison.
fiddled here
<div>
(image comparison1)
</div>
<div>
(image comparison2)
</div>
<div>
(image comparison3)
</div>
though it is very useful for me for single pair comparison, but the problem is whenever I want to implement the same effect with multiple pair, the container size defined in css becomes trouble. I have tried to make the width and height of css as auto & as fit to content, but nothing seems to work. I want to implement multiple pair comparison on the same page as shown in div above.
its like pairs of before after images.Each pair is of different size. Any suggeston for corrections with my coding is really appreciated.
Thank You in advance.
After some searching, this was the solution:
<div class="beforeAfterSlidebar" style="width:400px;height: 400px;">
<div class="bottomImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-4656-990776-1-product2.jpg" width="400" height="400" alt="after" /></div>
<div class="topImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-3369-201776-1-product2.jpg" width="400" height="400" alt="before" /></div>
</div>
<div class="beforeAfterSlidebar">
<div class="bottomImage"><img src="http://upstairsweb.com/images/afterImage.jpg" width="200" height="200" alt="after" /></div>
<div class="topImage"><img src="http://upstairsweb.com/images/beforeImage.jpg" width="200" height="200" alt="before" /></div>
</div>
With the JS:
$(".topImage").css('width', '50%');
$(".beforeAfterSlidebar").mousemove(
function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).find(".topImage").width(iTopWidth);
});
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Old answers - but they might help others:
I think you mean something like this?
http://jsfiddle.net/m9jj2fsp/6/
I didn't use divs, but the images instead to create the effect:
<div class="beforeAfterSlidebar">
<img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" />
<img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>
<img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" />
</div>
The javascript to go with it:
$(".beforeAfterSlidebar").mousemove(function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).children("#middleImg").css("clip", "rect(0px," + (iTopWidth + 50) + "px,600px,"+(iTopWidth - 50) +"px)");
$(this).children("#botImg").css("clip", "rect(0px," + (iTopWidth - 50) + "px,600px,0)");
});
If this isn't what you needed, just tell me, and I'll try to adapt my code.

Javascript change width of image onclick

I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed

Image position changing on device to device in HTML5 Canvas

I have one background image(City image) with scroll, on that image I am placing some small images(Just like bomb images on the city image). I have canvas width and height depending on these variables I am placing the bomb image on the city image. When I place the bomb image at can.width/2 and can.height/2 in 430*300 devices, image will be on the center but when I try testing on bigger screen mobile, bomb image position is changing. I need to place bomb image in the same location for all devices. When I zoom in also position is changing. Anybody please help me to solve this scenario.
Here is my code
function smallBombImg(){
document.getElementById('carImg1').style.top = can.width/2 +"px";
document.getElementById('carImg1').style.left = can.height/2 +"px";
//document.getElementById('carImg1').style.background-attachment = "fixed";
document.getElementById('carImg1').style.display = "block";
document.getElementById('carImg1').src = 'img/bomb1.png';
}
HTML code is here
<body>
<div id="container">
<canvas id="can"></canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
<div>
<img alt="simple1" id="carImg1" style="position: absolute; display: none;" />
</div>
</body>
I have to be brief, I am very sorry but I am running late.
Using jQuery:
var windowEventTimeoutEnded;
$(window).resize(function() {
clearTimeout(windowEventTimeoutEnded);
$(window).height(); // gets the height of the window
$(window).width(); // gets the width of the window
// This ensures the below does not trigger until the resize event is finished
windowEventTimeoutEnded = setTimeout(function() {
// Perform your resizing math and logic here, such
canvas.css({
width: 1234,
height: 235,
position: 'absolute' // etc, etc, etc
})
}, 500 );
});
Sorry for the brevity, hope this helps. I will return later and check if this helped and add to it if necessary, good luck!

how to automatically resize image to screen size from alt attribute and not src

i have downloaded an image scrollpane which changes the background images. i want to make the images get resized automatically at screen size.. to do this i used this html line
style="width:100%;height:100%;"
but then i realised that this line wont work on my case because the scrollpane works a little bit differently.
to be more specific, the scrollpane will use as background image the alt attribute of the img tag and for the thumbnails of the image it will use the src attribute of the img tag.
<div class="wrapper thumbs_wrapper">
<div class="thumbs">
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
</div>
</div>
so if i add this line here
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
there wont be any change to the background image but only to the thumbnail.. is there any way to resize the image from the alt attribute?
i simply want to grab the img from the alt attribute and resize it with a javascript function and set the width and height to 100%.
i have written this function but it doesn't work..
<script type="text/javascript">
function resize()
{
var element = document.getElementById('imgg');
var attr = element.getAttribute(alt);
attr.width = '100%';
attr.height = '100%';
}
</script>
<img id="imgg" onload="resize()" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>
thank you in advance
try this
<script type="text/javascript">
$(document).ready(function () {
var browserHeight = $(window).height();
var browserWidth= $(window).width();
$('.fullscreen').css({
height: browserHeight ,
width: browserWidth
});
})
</script>
<img id="imgg" class="fullscreen" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>

Can't get width of image with Jquery after using max-height for resize

I have a set of images that I get dynamically. To each image I'm applying a max-height, I use this for re-sizing purposes.
I have a jquery re-size function:
// resize my pics
function resizeMyImg(objct, containerWidth, containerHeight) {
var width = $(objct).width(); // I try alerting here and get a 0 answer
if (width < containerWidth) {
var percentageToAdd = ((100 * width) / containerWidth) + 100;
$(objct).css({ maxHeight: percentageToAdd + "%" });
}
}
And I'm trying to apply this resize function to my images:
$(document).ready(function () {
$(".photoAlbum").find("img").each(function () {
var myImage2 = $(this);
myImage2.load(function () {
alert(myImage2.height()); // I try alerting here and also get a 0 answer
resizeMyImg(myImage2, 240, 240);
});
});
});
This is the html I'm using in my page, hope it helps:
<div style="padding-top: 0px;" id="photosHere">
<div class="photoAlbum">
<img alt="" src="/Uploads/553290_471992686161625_498413822_n867.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/484524_430827793626240_991120671_n575.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/553290_471992686161625_498413822_n717.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/me993.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/me759.jpg" style="max-height: 100%;">
</div>
</div>
My problem is that I can't get the width of the images I always get a 0 instead of the real width. However, using firebug if I test an image I get the correct width.
N.B: Sometimes I get the correct answer but then I refresh and get 0 again. Any suggestions please ?? It's frustrating I've spent hours on this..
Today I was writing a jQuery plugin and I had the same issue so I ended up referencing the DOM element instead. Try
$(this)[0].height instead of myImage2.height()
and
$(this)[0].width instead of myImage2.width().
I assume that the correct width may be from fiddling in firebug, and a refresh clears all of the fiddling.
Did you try:
alert(myImage2.outerHeight());
in your second shown code and
var width = $(objct).outerWidth
in your first code?
( http://api.jquery.com/outerWidth/)

Categories