Dynamically change image size - javascript

I want to make a picture constantly but cannot seem to find relevant results.
For instance, I have a picture of 50px (width) by 100px (height) and I want to change the width from 25px to 100px and the height from 50px to 200px (so image stays width divided by height).
How would I do that and is it possible (I guess it is)?
Here a the basic code:
HTML
<div id="container">
<div class="image"><img src="http://libcom.org/files/images/library/black-square.jpg" width="50px" height="100px"/></div>
</div>
CSS
div#container {
width: 100%;
height: 100%;
}
div.image {
position:fixed;
}
Fiddle

To change the size immmediately, you can just set the CSS style with javascript:
var img = document.querySelectorAll("#container .image img")[0];
img.style.height = "200px";
img.style.width = "100px";
Demo: http://jsfiddle.net/jfriend00/bh94J/
If you want the size to change gradually, you can use CSS3 by also specifying this CSS:
.image img {
-moz-transition: height 3s, width 3s;
-webkit-transition: height 3s, width 3s;
transition: height 3s, width 3s;
}
as seen in this demo: http://jsfiddle.net/jfriend00/6YTmt/

see the demo here: http://jsfiddle.net/jELqu/4/
Use <yourImg>.style.height and <yourImg>.style.width for setting new values.

You can call a function to do the scaling.
For example:
if you would like to re-size the picture to the width of 200 pixels and height 300 pixels
you could do something like this:
first create a function, let's name it function scale(e). This function will get a
parameter which is the image object you want to re-scale.
At the function we can get the style property of the image object and change the width and height as you can see below.
Now we need to call the function and provide the image object like this: onclick="scale(this);"
The full code:
<div id="container">
<div class="image" ><img src="http://libcom.org/files/images/library/black-square.jpg" width="50px" height="100px" onclick="scale(this);"/></div>
and the function itself:
function scale(e) {
e.style.width="200px";
e.style.height="300px";
}

Related

Prepand an image element with jQuery makes it appear with different height than the parent and the SVG element

The problem with the code below is that the image's height (#age-hover-img) is not contained inside the parent div's height. So the SVG appears correctly but on hover, the image appears a bit higher than the SVG. As a result, the hover effect transition does not appear as smooth as it should be.
<div class="info-box-icon first-age">
<div class="info-svg-wrapper info-icon" style="width: 152px;height: 373px;">
<img id="age-hover-img" src="../imgs/test.svg">
<svg xmlns="http://www.w3.org/2000/svg" id="svg-1581" data-name="svg-dis" width="152.482" height="372.791" viewBox="0 0 152.482 372.791">..</svg>
</div>
</div>
CSS for the img element:
#age-hover-img
{
position: absolute;
top: 0;
bottom: 0;
object-fit: cover;
opacity: 0;
transition: opacity .3s ease-in;
width:100%;
height:auto;
}
The SVG (.info-svg-wrapper svg) has the width and height set to inherit, in order to avoid any conflicts.
I prepend the image using jQuery as sawn below.
$('.first-age .info-icon').prepend('<img id="age-hover-img" src="../imgs/test.svg" />');
I have also tried to add width:100% and height:100% at the .info-svg-wrapper, but this did not fix the problem.
Can the image on hover and the SVG, be at the same height, so I can have a smooth transition on hover?

Is there a way to auto add gradient to images?

Here is my code:
<div class='my-posts-container' id='<%=postobj._id%>'>
<%var menuid='menu'+postobj._id%>
<%var imagesource='../'+postobj.blob.path%>
<div class="my-posts-container-header">
<%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%>
</div>
<div class="menu hide" id="<%=menuid%>" >
<ul >
<li><button onclick="viewpost('<%=postobj._id%>')" >view</button></li>
<li><button onclick="removepost('<%=postobj._id%>')" >remove</button></li>
<!-- <li><button onclick="copypostlink('<%=postobj._id%>')" >copy link</button></li>
<li><button onclick="editthispost('<%=postobj._id%>')" >edit</button></li> -->
</ul>
</div>
<div class="post-image" >
<img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
</div>
<span>
<%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
</span>
<hr>
<div class="caption">
<%=postobj.caption%>
</div>
I want to keep my image size as 400px *400px
but add a background colour .post_image div,
basically, I want to add a gradient to the background based on any image in the image tag, something like this,
so that the whole 400 X 400 size is covered is this possible to achieve, if not can you suggest me other options, Thanks.
You can achieve something similar with CSS
Considering using this stylesheet
<style type="text/css">
.blured {
width:320px;
height:320px;
position: relative;
overflow: hidden;
}
.blured .blur {
height:70px;
width:100%;
position:absolute;
filter: blur(7px);
}
.blured .top {
top:0px;
background: linear-gradient(#000000d9, #00000000)
}
.blured .bottom {
bottom:0px;
background: linear-gradient(#00000000, #000000d9)
}
</style>
Then use the following markup
<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
<div class='blur top'></div>
<div class='blur bottom'></div>
</div>
The result will be something like this:
You can experiment with linear-gradient colors and the value for blur() to achieve an output close to your requirement.
References:
filter:blur()
background: linear-gradient
The effect you describe can actually be achieved. You just need to stack the same image with a smaller size on top of the image. The image underneath can then be blurred out and it will span the remainder of the 400px x 400px area.
To do this, you need to set the position field of the enclosing div to relative and that of both the images to absolute. I have reduced the height of the image sitting on top to 200px and kept the image width the same as the image underneath to resemble the style of the image in the question. Use filter: blur() to blur out the larger image.
Blurring softens the edges of the image (Remove the clip property and you'll know). Use the clip property to make the edges look "crisp".
I have used this image.
Run the code snippet below to see it in action:
<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
margin: auto;
position: relative;
width: 50%;
}
.outer {
filter: blur(5px);
position: absolute;
z-index: -1;
clip: rect(0,400px,400px,0);
}
.inner {
position: absolute;
top: 100px;
}
</style>
<div class="container">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>
This answers part of your question. Now, to automate the image placement as per size, you can retrieve and update the image dimensions using JavaScript:
var image = new Image();
image.onload = function() {
var height = image.height;
var width = image.width;
}
image.src = "<source>";
The image underneath will always be 400 x 400 px, you can update the attributes of the image on the top as per its actual retrieved dimensions if it is smaller than 400 x 400 px. Otherwise, squash it down to 400 x 400 px to cover the entire image underneath.

jQuery Fade Slider - remove defined height?

I am implementing a jQuery Fade Slider on a site that I am building, although having a defined height is giving me some issues.
I am using columns defined in percentages for their respective width, col-25 = 25% of the width. My images are placed within a class called .img-holder where the width is set to 100%. As of right now, when using the fade slider, the image height is fine at width and height on my screen but when scaling down into smaller screens the defined height obviously becomes problematic as I have left/right arrow navigation over my images and paragraph text below. I didn't want to use a different defined height for each screen variation through #media queries in my css. Is there a way to use the slider without having to define a height for it?
My CSS currently looks like this:
.img-holder { background: #EEE; overflow:auto; position:relative; width:100%}
.col { float:left }
.col .img-holder { width:100%; height:auto; margin-bottom:14px; margin-top:5px }
.fades-demo { position:relative; width:100%; height: 100% !important; margin-left:auto; margin-right:auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
My markup:
<div class="col col-50">
<div class="img-holder">
<div class="mgtb fades-demo hide" id="fades1">
<div>
<img src="/001.jpg" width="" height="" alt="" class="" />
</div>
<div>
<img src="/002.jpg" width="" height="" alt="" class="" />
</div>
<div>
<img src="/003.jpg" width="" height="" alt="" class="" />
</div>
</div>
</div>
</div>
JS
<script>
//scripts
$(document).ready(function() {
//initUI
initUI()
//init slider 1
var defaults = {
speed: 800
,timer: 4000
,autoSlider: false
,hasNav: true
,pauseOnHover: true
,navLeftTxt: ''
,navRightTxt: ''
,zIndex:20
}
,as = $('#fades1').fadeSlider(defaults)
,count = 2
//destroy
$('#o-btn-des').click(function() {
as.destroy()
})
//resize wrapper
$('#o-btn-cs').click(function() {
$('#fades1').css({
position:'fixed'
,left:0
,top:0
,width:'100%'
,height:'100%'
,'z-index': 300
})
as.defs.speed = 1000
})
//resize wrapper
$('#o-btn-ns').click(function() {
var t = '<div class="fades-demo mgtb" id="fades' + ++count +'">' +
($('#fades1 .fade-slides').length?$('#fades1 .fade-slides').html():$('#fades1').html()) +
'</div>'
$('#wrapper').append(t)
$('#fades' + count).fadeSlider(defaults)
})
})
</script>
I would think that:
.fades-demo { height: auto !important; }
.fades-demo img { max-width: 100%; width: 100%; height: auto; }
would work just fine. Of course, this assumes that the slider you are using doesn't remove all the images from the normal flow via float/positioning, which would cause the container to collapse in on itself. There are a number of solutions to that if the aspect ratio of the images is constant and you know it before hand. Or hiding an image in the container that is visible:hidden just to keep the right aspect ratio is another solution. Without knowing which fader/slider you are using, it'd be difficult to help you much further. Try setting up a jsFiddle if the above doesn't work.
Albeit the answer seems to be too late. Someone else facing this issue might want to give a try to the jquery-fade-slider plugin that I created.
The documentation can be accessed at http://jqueryfadeslider.com and the demos can be seen at http://jqueryfadeslider.com/demo

Auto change Image Width/Height

Using JS/JQuery how can I automatically change an image width/height based on a background DIV tag or window ?
You can use jQuery's width() function both to determine the width of the window and/or div, and also to assign the image's width:
var windowWidth = $(window).width();
$('img').width(windowWidth);
<div id="background-div">
<img src="xxxx.jpg" width="100%" height="100%"/>
</div>
For dynamic height you should see jQuery.height()
Using javascript you can change the height dynamically using this
var windowHeight = document.getElementsByTagName('body')[0].clientHeight;
document.getElementById("background-div").height = windowHeight + "px";
or
document.getElementById("background-div").style.height = windowHeight + "px";
For this you can use the jquery width() and height() methods or using css just specify the following rule.
img{ max-width:100%;}
Note that, this will set the dimensions of the image based on its parent div dimensions.
Have a look here http://www.cssplay.co.uk/layouts/background.html
It's a demo how to display and image with 100% width as a background .
I would use css for this.
CSS
.bg-Image {
background-image: url();
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
width: desiredWidth;
height: desiredHeight;
}
HTML
<div class="bg-Image"></div>
Now you could even use jquery to dynamically change the background-image, width & height of the div.
background-size: contain;
does the trick.
But it is a css3 property. It will not work in <= ie8.

cropping images from center on the fly - Javascript?

I have a bunch of images, that are various sizes, in terms of width and height.
Some are square, some are rectangle, but I'd like all of them to be width and height of my choice.
I know I can use the width="" and height="" in the
So, what I was looking for, is a possible javascript solution, maybe using jQuery, that will crop the images from center on the fly?
Is this possible?
You can position the images within a container using CSS. Then ensure overflow: hidden is set on that container.
For example:
<style>
.container { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>
<div class="container">
<img src="..."/>
</div>
<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();
$image.css({
left: 0 - (width / 2),
top: 0 - (height / 2)
});
</script>
<div style="width:200px;height:200px;overflow:hidden;position:relative;">
<img src="example.png" style="width:200px;height:200px;position:absolute;left:-10px;top:-10px;" />
</div>
Something like that! By setting the left/top properties of it's position you can simulate a crop. The above example will take 10px off the top and left of the image. This example assumes the image is 200px by 200px, obviously edit values for your image.
You may need to reposition the container div so that the image looks like it remains in the same place.

Categories