i have a php based site that needs to display images on the homepage that have arbitrary proportions. the requirement is to make them fill the browser window but to retain their aspect ratio.
for some reason i am having some trouble getting this to work using the jquery cycle plugin.
essentially the server-side code just pulls them from the db and pushes img elements into a div. i read the image sizes using php and write that to the alt element
then in my javascript code i have this:
$(document).ready(function() {
var window_h = $(window).height();
var window_w = $(window).width();
// sets the div that contains the jquery cycle images
$('#homepage-background-images').width(window_w);
$('#homepage-background-images').height(window_h);
$(window).resize(function() {
window_h = $(window).height();
window_w = $(window).width();
$('#homepage-background-images').width(window_w);
$('#homepage-background-images').height(window_h);
});
// homepage cycle
$('#homepage-background-images').cycle({
fx: 'fade',
speed: 5500,
fit: 1,
width: window_w,
height: window_h,
});
// ...
Obviously this isn't going to work since each image has a different aspect ratio, but I was wondering how one might pass serial aspect ratios into jquery cycle? These will always need to take the browser window size into consideration...
I have tried using the 'before' option on jquery, but it seems that you can't really affect the image properties there. I tried to use that to change the window_h variable based on a quick aspect ratio calculation but even updating that in my onBefore function seems to yield no result on the cycling images...
Any ideas? Is this tricky or am I just missing something obvious?
Thanks!
- J
If you use CSS max-width and max-height instance of HTML width and height it don't lose aspect ratio. Try adding style attribute to your image
Related
I'm attempting to use the following design on a responsive website. I'm curious if there's a way to set up some sort of inverse resizing method through jQuery / Javascript because as the viewport gets smaller, the copy will respond and get larger.
I've tried using jQuery to modify the image size, but I only know enough to manually resize it at different breakpoints
Here's my attempt at a solution:
var viewportWidth = $(window).width();
if (viewportWidth <= 768) {
$("#curlybrace").css("width", "80px");
}
Is there a way to set up a dynamic scaling image?
Try looking into CSS and media queries, seems like it would be a neater solution than trying to do this with JS.
You would use something like this:
function resizeFn() {
var width = window.width();
// ...
}
$(function() {
$(window).resize(resizeFn).trigger('resize');
});
Not possible to do an inverse with CSS, I don't think (I thought maybe through calc(), but I don't think it lets you do unit manipulations like that).
Fair warning, this doesn't sound like a good design unless you're trying to make it look nuts.
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
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"});
What is the best way to display a panel of different sized images as all being the same size. Is there a simple Javascript framework that can handle the resizing and possibly some cropping.
For example if you look at Pinterest you will see that all the images have variable sizes (we can use jQuery masonry for this). But then when you look at this page, http://pinterest.com/pin/97249673174024268/ all the images are the same size.
Firstly is my question sensible and secondly is there a way we can achieve this with a Javascript library.
If you want to do this entirely in JavaScript, it's simple enough that you don't need a library. If you have jQuery, it makes it even easier.
Place the image inside a <div> with the width and height set to your desired size, 'overflow' set to 'hidden', and 'position' is either 'absolute' or 'relative'.
Get the size of the image:
var imageWidth = $(image).width(),
imageHeight = $(image).height();
(If it was loaded into a JavaScript Image object, you can also just get it from image.width and image.height)
Do a bit of math figure out how much to shrink or enlarge it:
var widthScale = divWidth/imageWidth,
heightScale = divHeight/imageHeight,
scale = Math.max(widthScale, heightScale),
newWidth = Math.round(imageWidth*scale),
newHeight = Math.round(imageHeight*scale);
Essentially,this figures out how much it would need scale the image to make the width fit and to make the height fit, then picks the larger of the two so the image fits on one side and overflows on the other.
Style the image to fit the new size and center it inside the div:
$(image).css({
width: newWidth+'px',
height: newHeight+'px',
position: 'absolute',
left: '50%',
top: '50%',
margin-left: 0-Math.round(newWidth/2)+'px',
margin-top: 0-Math.round(newHeight/2)+'px'
});
That should do it!
This plugin here can handle varying image sizes and arrange them like you want.
I wrote a simple javascript code to load an image and alert its width and height, but I found its width and height will different between desktop and iPad.
For example, I load an image that size is 8000*1845, browser shows image width is 8000 and height is 1845. Therefore, on iPad, browser show image width is 2000 and height is 462.
The other image is 2600 * 2400, browser shows image width is 2000 and height is 2400, but it shows image width is 1300 and height is 1200.
I don't know whether I misunderstanding something or not. Will iOS downsize the image?
Anybody knows? Please tell me what happen?
var img8000 = new Image();
img8000.src = '8000_1845.jpg';
img8000.onload = function () {
alert(img8000.width + ' ' + img8000.height);
}
var img2600 = new Image();
img2600.src = '2600_2400.jpg';
img2600.onload = function () {
alert(img2600.width + ' ' + img2600.height);
}
When you get the image's height or width using this.width or when using jQuery's $(this).width() you are actually getting its current dimensions. If the image is scaled up or down, then the values you get will not match the actual source image's dimensions.
I made an example you can play with. It is pre-written to use onclick, but if you remove those onclick attributes and uncomment the jQuery code, you'll find it alerts the same values.
You should attempt to avoid image scaling by placing the image somewhere on the page where the CSS does not affect its size (as a test, try making a blank page containing just the image), and remove any custom height/width attributes if they exist.
Otherwise, if the scaling is done natively by the iPad Safari browser, there is little you can do.