Develop Reference

Nodemailer-juice img tag only displays width and height

I have a problem, I'm trying to set an image inside the html of nodemailer styling it with nodemailer-juice. Even though I can style everything, when it comes to images I can only set width and height, not position, or margin, etc. Does anybody know why? Thanks a lot in adnvance.
<style>img {position:relative; height:10em;}</style>
<img src="cid:abstract#abstract.com">
it only takes height

Change height of element while resizing window

As you can see in the picture, I have a problems with my container in my slideshow. The gap between content and slideshow gets bigger the smaller the window size gets, which is what I want to avoid.
On resizing the window width, the content container shall change the height automatically pixel for pixel. So it gives the website a nice flow and there is no big space between the slideshow and the content on different screen sizes.
I made a JSFiddle now: https://jsfiddle.net/joggal/fk3v7aau/2/
Hope it shows my problem: the container is absolute positioned but i want it to resize so the gap between the slideshow and the container with the rows isn't too big / small. I want the container to be directly below the slider.
I tried to fix it with #media in the CSS, but this isn't the best solution at all :(
I hope you can help me :D

First get the height of the slider in window resize function.
Then append it to the image.
$( window ).resize(function() {
var SliderHeight = $('.slide').height();
$( ".img" ).css('height',SliderHeight);
});

Set the same height to divs in a block using Bootstrap3

i'm working on this project with Bootstrap3 and this little problem came up.
I need when the page resize que last div of this block keep the same height always.
I thought about something like setting the height to 100% but since there's divs above them with diferent height they height for 100% still different.
Maybe something using calc() but I still dont know.
Here's a picture to check whats happening:

How about just define what height you want the div to be in px instead of percentage. for example :
height = 320px

make image height be the 1/4 of the window's height

I try to make an image's height to always be the 1/4 of the window's height, based on responsive design and fluid images
The image is a random image picked up by the database, so I dont know if its gonna be elongated or not.
This is what I got untill now
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(based on the anser by migf1, from here , sorry its Greek)
And that's it. Works fine , if you just open a browser and the browser expands to the whole screen.
Problems
-I simply cannot align the image to the center of its container. I tried margin, padding, float, position:absolute. Nothing works
-If I start scaling the browser's window (simply dragging one corner) the image's height does not "follow". Resizes, but not actually in 1/4 of screen's height.
-If I open a browser and it's not expanding to the whole screen, the image's height not scale to the 1/4 of screen's height.
Any advise?
Thanks in advance

You can use css property #icon{ text-align: center;} on the container DIV to center the image horizontally within the DIV. Look at: http://jsfiddle.net/2vxmX/

Fancybox minWidth setting forces width to be static

How can I get content widths to size up in Fancybox? I would have expected this to automatic as I only set minWidth, but it seems only the initial width, when you open the modal dialog remains static. I have set maxWidth, but that has no effect on the width whatsoever. I remove all the width settings, and the content shows up crammed up in a small width area. I am confused as to how to get this working correctly.
$('a.various').fancybox({
scrolling:'no',
minWidth:450,
minHeight:450,
openEffect:'none',
closeEffect:'none',
closeBtn:false
});
This gives me increasing heights, but widths stay static. I need the width to increase when let's say there is a larger image and such. I tried setting the minWidth property to 640, but that produce too much whitespace to the right of images that are smaller in width.

Make sure also to set the autoSize to true:
autoWidth : true,
You don't need the minWidth.
And the HTML you want the be displayed inside fancyBox also should have a specific given width.
Fx. if you want the content to be 300px in width, set the body to be 300px in width:
<body style="width: 300px;">
That's the way I do it. Hope it works :D