We Keep Coding

How can I resize my image proportionally

How can I resize my image like they did here website.
When you zoom in that picture where it says "Radiant Power" , it does not go bigger. Just stays the same size compared to the other elements on the site.
Can you guys give me some tips on how to do that, I can't seem to find the answer anywhere.
Here's my website: site
It's on a free domain so it will load slow.
As you can see I made the big picture work ,because it's 100vw so it's much easier to handle... it stays the same when you zoom in. Now i want the little one to be resized when I zoom in and keep its aspect ratio like that website I showed.
Here's the jsfiddle
That's how I did the large picture resize:
$(function () {
var scr=screen.width;
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else{
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
$(window).resize(function () {
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else {
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
});
});

You just make image scale on percent of total width/height like this:
https://jsfiddle.net/bhdpmhgc/1/
#test{
width: 10%;
height: 10%;
}
<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">

How do I apply the same effect that "background-size: cover" does, on a <img>

I need a <img> to have the smallest possible size without leaving any blank spaces inside a div and it needs to be centralized horizontally and vertically. The size of the image is variable.
So here is an example so you can understand it better:
http://jsfiddle.net/q2c9D/
More info: much like Mikel Ward did, I need the images to fill up the div, so that the background of it is not visible. I made the div background black so it was easier to tell that it is not filling up the div. But I need the images to be centered and to be the smallest size possible without being distorted while filling up the div.

Here is my go
I would set the width to 100%, and remove the height property altogether. This will prevent the image from being distorted
img{
width: 100%;
}
To center the element, I would use this plugin. It makes you do no work, other than to call the function
$("img").center()

Try adding min-width: 100% to the img. Here's an example. It may stretch the picture a little but at the size it is, may not be too noticeable. :)

This will center the image on the page:
img{
margin: 0 auto;
position: relative;
display: block;
}
Just wrap the images in a <div> to position them somewhere on the page.

The way i do it is set the width or height, but only 1 as 100%.
<img width="100%" src=""/>

So I was able to get it working the way I wanted using jQuery. With the following code:
function centerimg(){
$('img').each(function(){
var imgwidth = $(this).width();
var imgheight = $(this).height();
if (imgwidth > imgheight) {
$(this).css({
"height": "100%",
"width": "auto"
});
imgwidth = $(this).width();
$(this).css("margin-left", -.5 * imgwidth + 50 + "px");
} else if (imgheight > imgwidth) {
$(this).css({
"width": "100%",
"height": "auto"
});
imgheight = $(this).height();
$(this).css("margin-top", -.5 * imgheight + 50 + "px");
} else {
$(this).css({
"height": "100%",
"width": "100%"
})
}
})
};
window.onload = centerimg;<code>
The code gets the width and height of the image, so if the image is wider or taller it will properly set the smaller dimension to 100% and the larger one to auto. After that it gets the value of that last one again (since it was re sized with auto) and centers it. Also, if the image is a square it just sets both to 100%.
This way the image will ALWAYS fill up the div and be centered.
Thanks all. Hope this code helps others.

How can I crop an image using only Javascript?

Is there anyway I can crop an image using raw javascript? I want to be able to have a function that takes an image (html tag or source or whatever) with a certain width, height, offsetX and offsetY and it create a image of the portion specified.
I am not that familiar with HTML5 canvas and the like but I need to support older browsers, so that's not even an option (it sucks I know).
I hope this is clear.
Thanks.

If all you need is to display a portion of the image, use css clip: https://developer.mozilla.org/en/CSS/clip . Works in IE6+ even with JavaScript disabled.
If you need to physically crop the image, and need IE6 support, then your options are Flash or sending the data plus cropping values to a server which returns the cropped image.

Often, it's enough to set the limits for rendering by using CSS styles to make the image appear cropped.
Instead of an img, use a div. Assign the desired size to the div. Set the property background to -x -y url('...url-of-your-image...') no-repeat
Replace x and y with the top/left offset that you want to display.

Try with this:
function crop(img_id, crop_id, x, y, width, height) {
$(crop_id).update('<img id="' + crop_id + '_img" src="' +
$(img_id).getAttribute('src') + '" style="display:none" />');
var scale_x = $(crop_id).getWidth() / width;
var scale_y = $(crop_id).getHeight() / height;
$(crop_id).setStyle({
position: 'relative',
overflow: 'hidden'
});
$(crop_id + '_img').setStyle({
position: 'absolute',
display: 'block',
left: (-x * scale_x) + 'px',
top: (-y * scale_y) + 'px',
width: ($(img_id).getWidth() * scale_x) + 'px',
height: ($(img_id).getHeight() * scale_y) + 'px'
});
}
The problem: needs Jquery, and probably the solution works in IE8+.... do you need for IE6+?

How do I get slimbox 2 to auto-resize to fit the screen?

According to the Slimbox2 documentation this function isn't supported. But I was wondering if anyone had encountered any tricks to make this work.
The main concern I have is that some of my images are fairly lengthy, and at low resolution LightBox2 would create an annoying experience for the user.

I recently started to use slimbox2 on my website (http://www.trips.elusien.co.uk) and found that it could benefit from a few modifications:
"slide resize": this makes the size of the slideshow constant, rather than depending on the size of the image (by specifying a pixel size), or you can use a percentage to make the slides larger or smaller in the slideshow. You specify this using 2 new options:
slideWidth: 0, // Initial width of the slide (in pixels or in percent as a string e.g. "50%")
slideHeight: 0, // Initial height of the slide (in pixels or in percent as a string e.g. "50%")
enable the slides to be flipped automatically, rather than manually. You specify this using a new option:
slideInterval: 0, // Interval between flipping slides (in seconds), 0 means no automation.
download the slides from the slideshow.
The first and last features cannot be done with the origal version of slimbox2 since in that version the image is displayed as a BACKGROUND image, rather than using the "IMG" tag.
I have put the Javascript and CSS files on my website. If you want to try them go to my website and click on the "slimbox examples" link, you can download them from here. To see a neat way of using slimbox2 click in the "photoSLide Show" link on the home-page.
Regards Neil

its easy to fix check my code.
find and replace the three lines in slimbox2.js file:
$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);
with:
/* make sure the image won't be bigger than the window */
window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //ie fix
window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //ie fix
var winWidth = window.innerWidth-200; //browser width
var winHeight = window.innerHeight-100; //browser height
var my_w = preload.width; //original width
var my_h = preload.height; //original height
// scale width
var scaleW1 = winWidth;
var scaleH1 = (my_h * winWidth) / my_w;
// scale height
var scaleW2 = (my_w * winHeight) / my_h;
var scaleH2 = winHeight;
var scale = (scaleW2 > winWidth);
if (scale) {
reswidth = Math.floor(scaleW1);
resheight = Math.floor(scaleH1);
}
else {
reswidth = Math.floor(scaleW2);
resheight = Math.floor(scaleH2);
}
if ($("p").hasClass("slimboxie")){
$(image).css({filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='"+ activeURL + "', sizingMethod='scale')", visibility: "hidden", display: ""});
$(sizer).width(reswidth);
$([sizer, prevLink, nextLink]).height(resheight); }
else {
$(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: reswidth + "px " + resheight + "px", visibility: "hidden", display: ""});
$(sizer).width(reswidth);
$([sizer, prevLink, nextLink]).height(resheight);
}
im amateur at javascript but i think its working great. I made it work with IE8 also. You only need to insert:
<!--[if IE 8]>
<p class="slimboxie"></p>
<![endif]-->

after loading the image, do this:
$('#lbImage').css('background-size', 'contain');

attaching div to a specific element for showing with javascript

Clicking on the image should show div near it (.show() in jQuery).
But how can i attach div to that image? Is it done with pure css, or javascript?
I tried several "position:absolute", but can't attach it near image.
How it should be done?

It's pretty straightforward, you need to compute the .css({top:___,left:___}) such that the underlines are filled with computations based on the clicked image's .position().top and .position().left.

something like this:
$(document).ready(function() {
$('#someim').click(function() {
showDiv($(this), $('#somediv'));
});
});
function showDiv(sender, object) {
var pos = $(sender).offset();
var width = $(sender).width();
$(object).css({ "left": (pos.left + width) + "px", "top": pos.top + "px" });
$(object).show();
}
<img id="someim" width="250" height="61" alt="Stack Overflow" src="http://sstatic.net/so/img/logo.png">
<div id="somediv" style="display:none; margin-left:10px; color:Red">sd</div>