We Keep Coding

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.

Automatically Adjust Height Showing Slide Content

I am using angular and angular animate to hide and show content with a slide up/down effect - similar to jQuery show.
However, this worked well when i had one slide. Now i have multiple, with varying sizes, how can i adjust the code so the height of the element to show (div or form) is automatially calcuated and adjusted rather than being predefined?
HTML:
<h2 ng-click="showSpoons = !showSpoons">Show Spoons +</h2>
<div ng-show="showSpoons" class="animate-slide-up">
<p>Spoon</p><p>Spoon</p><p>Spoon</p>
<p>Spoon</p><p>Spoon</p><p>Spoon</p>
<p>Spoon</p><p>Spoon</p><p>Spoon</p>
<p>Spoon</p><p>Spoon</p><p>Spoon</p>
</div>
<br>
<h2 ng-click="showForks = !showForks">Show Forks +</h2>
<div ng-show="showForks" class="animate-slide-up">
<p>Fork</p><p>Fork</p><p>Fork</p>
<p>Fork</p><p>Fork</p><p>Fork</p>
</div>
<br>
<h2 ng-click="showCups = !showCups">Show Cups +</h2>
<div ng-show="showCups" class="animate-slide-up">
<p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
<p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
<p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
<p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
<p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
</div>
CSS:
.ng-hide-add, .ng-hide-remove {
/* ensure visibility during the transition */
display: block !important; /* yes, important */
}
.animate-slide-up {
transition: .25s linear all;
height: 10em;
overflow: hidden;
}
.animate-slide-up.ng-hide {
height:0;
}
Plunker: https://plnkr.co/edit/t7oVw3n3oTxuPaPLo38a?p=preview

You are pretty much defining a fixed height value for your slides. Instead of using fixed values, you may use height: auto;. This will provide your slide an automagically generated height value, according to the slides content. So basically, what you need is this:
.animate-slide-up {
transition: .25s linear all;
height: auto;
overflow: hidden;
}

plnkr
Use this,
.animate-slide-up {
transition: .25s linear all;
min-height: 10em;
overflow: hidden;
}

Dynamically change image size

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";
}

How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?

It's kind of difficult to word... So I made a picture!
(source: tumblr.com)
I tried giving the div that has a set width and height overflow:hidden; but that didn't work... I searched all over and I probably just didn't word it right.
I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! Thankyou!
HTML
<div class="trigger" id="photoTile">
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>
CSS
.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}
#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}
#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}

Putting the image in a <div> with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>.
edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div> styled with "overflow: hidden". Here's the CSS for the <div>:
#w { height: 100px; width: 100px; overflow: hidden; }
I didn't have to do anything interesting with the <img> at all; it's just lexically nested inside the <div>.