We Keep Coding

change image manually as window sizes

I used js to set image width and height according to window size. But in some cases when the browser is very wide, the image's hight exceeds all its father element's height. As a result, the bottom part of the image is not shown. How can I solve this?
I used bootstrap and swiper in this project and the image I want to change is inside my swiper division. I set and all the image's father elements' height to 100%. Here is my js code to change is image dymanically. The image size is 2560*1440.
if(winWidth/winHeight < 2560/1440) {
imgHeight = winHeight;
imgWidth = winHeight/1440 * 2560;
}else {
imgWidth = winWidth;
imgHeight = winWidth/2560 * 1440;
}
attr = "width:" + imgWidth + 'px;height:' + imgHeight + 'px;margin-left: -' + imgWidth/2 + 'px;margin-top:-' + imgHeight/2 + 'px';
$('.main .swiper-slide > img').attr('style',attr);
PS:
Sorry I didn't make it clear. The following methods you provided scale the image down in vertical view and so leaves much blank in the page. Actually I want my image's height to occupy the whole window's height, no matter in vertical window or horizontal window. And if the window is wide enough, image's width equals the window's width, otherwise cut the image in width and make it equals the window's width too.

#patstuart is correct, this is much better handled directly through CSS. It's pretty amazing how many styling issues (go figure) can be solved without writing a single line of JavaScript. So to answer your second question, let's figure out how it can be done with CSS. Without seeing a fiddle or your actual page / image, I'll just shoot from the hip here. If I understand correctly, you want the full image to display at its correct ratio no matter what the width / height of the screen is. If that's the case, here's a nice little trick:
.main .swiper-slide {
width: 100%;
height: 0;
/* Padding bottom should be the height's ratio to the width.
Which in this case, would be 56.25% */
padding-bottom: 56.25%;
}
.main .swiper-slide > img {
width: 100%;
}
That is how aspect ratio can be handled with CSS. Let me know if that resolves your issue or if you have any other questions. CSS was made for styling so always look for a solution there first.

How can one find the "maximized" height of a browser window?

I am trying to make a picture take up 70% of the user's screen. However, if the screen is made smaller when the page is loaded or if the person has inspect element open, the picture becomes small and stretched. I believe the best solution would be to find the maximum height of the browser window and make the image that size. However, I am not sure how to do that?
Here is my current code for image sizing:
var topoffset = window.innerHeight * 0.77;
var profilestart = topoffset - $(".prof-header").height();
$('.splashPic').css("height", topoffset);
$('.splashPlaceholder').css("top", profilestart);
I also want to make it so that if someone is using a huge monitor (i.e. large Mac), the image size maxes out at that point? Any suggestions would be very helpful!
Edit: I don't want to make the image resize dynamically. Only load once.

Use window.screen.availHeight instead of window.innerHeight
or screen.height
var x = screen.height*0.7;
EDIT: Here's more code to show that it works for what you asked. Gets the height upon load and doesn't resize.
<img id="img2" src="http://lorempixel.com/320/240/food" />
<script>
$(document).ready(function () {
var x = screen.height*0.7;
$('#img2').css("height",x);
}
</script>

It sounds like what you want to do is something like this:
img{
display:block;
width:70%;
min-width:320px;
max-width:1200px;
}

If you want the image to take up 70% of the viewport height (and obviously retain its ratio) you could use the new css unit vh (viewport height) like this:
img
{
height: 70vh;
}
FIDDLE

CSS through jQuery not applied

I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:
If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css
I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height());
}
else {
$('#controls').css('top', '470');
}
}
$(window).resize(resizeVideo);
In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:
Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.
I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!

You need the 'px' suffix when manipulating the css via jQuery.
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
} else {
$('#controls').css('top', '470px');
}
}
$(window).resize(resizeVideo);

Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.
Also because the function resizeVideo is not a reference you will have to call it with ()
For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be:
$('#controls').css({top: 470 + "px"});

Jquery, resize image by width keeping constant height

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.

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);