Jquery, resize image by width keeping constant height - javascript

How can I go about resizing/cropping an image so the height is constant but its width gets smaller as the page is resized?
The same effect as you can see in the carousel here:
http://dai.com/
Thanks,

Did you looked at the website image closely? Because it's not resizing! It's just centered in the middle of the img element as an background property. When you change the width of the screen you will see that the image center is adjusted..
It's pretty simple to accomplish this effect by using only the background property:
background: url("img path") 50% 0 no-repeat;
The background image will get the height of the element.
Example: here

you should bind a function to the "resize" event, and give the image max-width and max-height instead of height and width,
function imageresize() {
if (($(window).width()) < '800'){
$('#img').css('max-width',$(window).width());
} else {
$('#img').css('max-width','');
}
}
imageresize();
$(window).resize(function(){
imageresize();
});
I attached a jsFiddle: http://jsfiddle.net/gGBRF/

As #Sven said, it's not being re-sized it's just centered and re-sizing the browser making it looks like it's an overflow from both sides.

Related

How to .animate() a background-image size

Can I .animate a background-image size with javascript/jquery?
The code where wt_r and ht_r are the screen size. Can I make that dynamic with .animate()?
$('#outer').css('background-size',wt_r+' '+ht_r);
jsfiddle- http://jsfiddle.net/m7zmzkpz/1/
You can't change both height and width of a background-image.
Using .animate():
$('#outer').animate({backgroundSize: '100%'}, 800);
It is hard to answer question without more information, but you can try animate your background size with backgroundSize property? like this:
$('#outer').animate({ backgroundSize: '100%' }, 3000);
Try to use your own parameters wt_r and ht_r as backgroundSize value
Hope this helps!
when i resize the browser window the background image should resize – X10nD 3 mins ago
No JS needed at all...
background-size:100% 100%; // or just 100% to keep Aspect-Ratio
http://jsbin.com/varecu/1/edit?html,css,js,output
Animate on page load? No JS needed at all:
http://jsbin.com/xuhuca/1/edit?html,css,js,output
Want to keep aspect ratio but fill all the spaces? background-size: cover;
http://jsbin.com/varecu/2/edit
(Resize the window on all those demos to see the magic. The background-image resizes!)
Assuming you want #outer to fit the screen size you could do soemthing like this:
var setSize = function(w, h) {
$('#outer').css({
'background-size': w + 'px ' + h + 'px'
})
}
The setSize function takes two parameters, width and height. You can call this function from wherever you need it, f.ex on resize. You can pass the current window width and height into the function like this:
window.on(resize, function(){
var wt_r = $(window).width();
var ht_r = $(window).height();
setSize(wt_r, ht_r);
})

Why is slideDown Expanding an Image From the Top Left Hand Corner Instead of the Entire Width?

I have a series of pictures that I would like to slideDown() from left to right (creating a waterfall effect). I create the waterfall effect using setInterval():
var i = 1;
var numberCount = 5;
var counter = window.setInterval(function(){
$("#instagram-pictures .instagram-picture:nth-child(" + i + ")").slideDown(1200);
if(i === numberCount){
window.clearInterval(counter);
}
else{
i = i + 1;
}
}, 400);
This works without a hitch except the slideDown part. For some reason, my pictures are not sliding down from the width of the entire top line, rather they are "expanding out" from the top left hand corner.
jsFiddle here
How do I fix this?
.slideDown() animates the height of an element, not it's position. You're allowing the width of each picture to be automatically determined based on the height. So as the height changes, it's determining new widths as well, and animating a diagonal stretch.
If you give the images a fixed width you'll get the downward animation you're after.
Source: http://api.jquery.com/slidedown/
Try ths:
Give each image a fixed width
.instagram-picture{
display: none;
width:100px;
height: 160px;
}
The width is determined based on the height and since the height is changing when the image slides down, the width changes with it. Therefore, setting a fixed width will fix your problem!
JSFiddle Demo

Calculate responsive margin for responsive fixed image

I'm working on a template showcasing soccer players stats.
On the left there is the .picture of the player. It's fixed and the height is 100% of the window. Its width increases or decreases when you reduce the height of the window.
On the right, you should find the players stats and biography. It all fit in the div .block-left. The width should be 100% minus the player .picture width.
For now, the only way to showcase it is to increase the value of margin-left with the same value as the .picture width.
Here lies the problem, .picture width is always changing depending on your screen resolution, so should the margin-left of .block-content.
I can't find a practical way to do this. Maybe jQuery?
The template is available here : http://bettercheckthekids.com/pirlo/index.html
It's not a popular design but yes you can do it with jQuery using window resize event.
$(window).resize(function () {
var imgWidth = $(".picture img").width();
$(".block-left").css("margin-left", imgWidth);
});

Set height of div in pixels based off width of browser window in % (jQuery or JS?)

I am trying to set up a black border around a webpage. For the left and right side, just making "width: 5%;" in the CSS is fine. But then I want JS/jQuery to work out how many pixels that is, and make that the height of the top and bottom div.
Is this possible?
Thanks.
This should work for you
var val = $(".leftAndRight").width();
$(".topAndBottom").height(val);
Or with one line:
$(".topAndBottom").height($(".leftAndRight").width());
You can determine the value for the border width programmatically, assign it to all four borders, and also refresh it any time you resize:
var width,
drawBorder = function () {
var body = $('body'),
width = body.width() * 0.05;
body.css('border-width', width + 'px');
};
drawBorder();
$(window).resize(function () {
drawBorder();
});
Demo
If you set the left and right width in your stylesheet and then use JS to give the same border width to the top and bottom, unless you use a resize function your left and right borders will change every time you resize but your top and bottom borders will remain fixed.
You can use .width() to find width without the border and .outerWidth to find the width including the border. I think .outerWidth also gives you the width with the padding you may have to subtract that.

Dynamically resize div based on window size

I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that?
This is my website if you want to take a look at its code:
http://www.briefeditions.com
If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
var windowHeight = $(window).height();
$('#divID').css('min-height',windowHeight+'px');
});
UPDATE
If you want that site will resize based on browser resize then use % instead of px
CSS:
html {height:100%; overflow:hidden}
body {height: 100%;}
I guess you need screen width and height for client(users) machine.
at onload of page get screen width & height and set those values to divs using jquery/javascript
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
check this for more info
Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.
I checked the code from the provided link in question.
Change width to 80% in #content style.
And in .wrapper change width to 100%.
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;
You can do like this
var width = $(window).width();
$("#divId").width(width);

Categories