css below is what i simplified down to get it to where its at:
header #home_slider {
display: block;
position: absolute;
width: 100%;
height: 275px;
top: 0px;
left: 0px;
margin-top: 71px;
overflow: hidden;
background-color: #fff;
}
@media only screen and (min-width: 1170px) {
header #home_slider {
margin-top: 0px;
height: 690px;
}
}
#home_slider img {
max-width:100%;
max-height:100%;
cursor: pointer;
}
notice whats going on, the container div is always 100% wide, but on large screens its 690px high, on small screens its 275 high
we need the img to fill that area. the max-width/max-height stuff works, but only in one direction. resize browser window to see what i'm talking about, make #home_slider background-color be red and you can see it even more
basically we need that image to scale to EITHER max width or max height, whichever it needs to do in order to fill the entire area. its fine if image crops, just needs to maintain aspect ratio.
it's #1 priority to work on right now, want this stupid site done done done
ive hunted around , dont think its doable with just css which is fine. lets js it up
bam, that got it. love some jquery. i kid you not, i just start looking for some freaking plug in that someone has made for anything that takes longer than an hour to fix now
this simple, added two plugins (imageLoaded.js and imageFill.js)
and one extra call:
$('#home_slider').imagefill();
$('#home_slider').cycle({
fx: 'fade',
speed: 800,
timeout: 3000,
next: '#home_slider',
pause: 1,
slideResize: false
});
Taylor Bernard on August 18, 2015:
yeh i was going to say grab that imageloaded.js lib. cause that christain vega guy you linked. his files were 700k each but took a sec to load in the div. i THINK that cycle.js slider MAY already have an pre-image loader built in. during all the testing i never saw it try to load one top to bottom once.
Justin Bernard on August 18, 2015:
word
cool, lets close this thing out
client was complaining that images looked too low res
here's the build of the home caro images they want, make them big enough so that dekstop view looks decent scaled up. maybe 1200px or so wide, play with it. then add them to /brady, update index.html, right now they are called like slider_test.jpg, kill those and name them something like home_banner_1.jpg
hey make sure you didnt have your code on /brandy open
its acting like it reverted to not working for some reason, double check and close if you have ft/sublime up
Justin Bernard on August 18, 2015:
take a look at brandy and click through to see all 4, the first two work well for me at all sizes but the last 2 are cutting off too high
if you see the same thing , i already shared link with client so please update all 4 images to be same size as first 2, being they fit right, can sort out bug later
thx
Taylor Bernard on August 18, 2015:
updated
Justin Bernard on August 18, 2015:
so weird
check the right side image cropping its doing
notice first one is like 50px from right, then the next one is all the way
thats the imagefill thing not working for some reason
Comments
Justin Bernard on August 18, 2015:
check updates i made at
http://client.fleeangrybear.com/webb/brandy/
css below is what i simplified down to get it to where its at:
notice whats going on, the container div is always 100% wide, but on large screens its 690px high, on small screens its 275 high
we need the img to fill that area. the max-width/max-height stuff works, but only in one direction. resize browser window to see what i'm talking about, make #home_slider background-color be red and you can see it even more
basically we need that image to scale to EITHER max width or max height, whichever it needs to do in order to fill the entire area. its fine if image crops, just needs to maintain aspect ratio.
it's #1 priority to work on right now, want this stupid site done done done
ive hunted around , dont think its doable with just css which is fine. lets js it up
somethign like this may do it:
http://www.ollicle.com/projects/jquery/imagefit/eg/
basically we need a way to cycle through the images and either apply make it taller or make it wider on a case by basis in order to fill that area....
Taylor Bernard on August 18, 2015:
http://client.fleeangrybear.com/webb/brandy/index.html
i just made max width 100% so it binds to that first. then max height = auto will fill to the bottom after width has been filled.
Taylor Bernard on August 18, 2015:
http://johnpolacek.github.io/imagefill.js/
Justin Bernard on August 18, 2015:
http://christianvarga.com/jquery-resize-image-to-parent-container-plugin/
Justin Bernard on August 18, 2015:
this simple, added two plugins (imageLoaded.js and imageFill.js)
and one extra call:
Taylor Bernard on August 18, 2015:
i THINK that cycle.js slider MAY already have an pre-image loader built in. during all the testing i never saw it try to load one top to bottom once.
Justin Bernard on August 18, 2015:
cool, lets close this thing out
client was complaining that images looked too low res
here's the build of the home caro images they want, make them big enough so that dekstop view looks decent scaled up. maybe 1200px or so wide, play with it. then add them to /brady, update index.html, right now they are called like slider_test.jpg, kill those and name them something like home_banner_1.jpg
http://cloud.fleeangrybear.com/4122270I3c3X
Taylor Bernard on August 18, 2015:
put new images on there at 1400 px res. see if thats good enough
Justin Bernard on August 18, 2015:
do you have the images for all the project pages? like the diff schools/etc, shoudl be a zip sent over on 6/16, dir looks like this:
Justin Bernard on August 18, 2015:
if so, i need each one at 516px high. width can be inconsistent the way those pages will be handled now
just name them like slide_schoolname_1.jpg, etc. can all be in same folder
thx
Taylor Bernard on August 18, 2015:
Justin Bernard on August 18, 2015:
hey make sure you didnt have your code on /brandy open
its acting like it reverted to not working for some reason, double check and close if you have ft/sublime up
Justin Bernard on August 18, 2015:
take a look at brandy and click through to see all 4, the first two work well for me at all sizes but the last 2 are cutting off too high
if you see the same thing , i already shared link with client so please update all 4 images to be same size as first 2, being they fit right, can sort out bug later
thx
Taylor Bernard on August 18, 2015:
Justin Bernard on August 18, 2015:
check the right side image cropping its doing
notice first one is like 50px from right, then the next one is all the way
thats the imagefill thing not working for some reason
it never does that for you? this is chrome/mac
Taylor Bernard on August 18, 2015:
Justin Bernard on August 19, 2015:
Taylor Bernard on August 19, 2015:
Version 44.0.2403.155 (64-bit)
Justin Bernard on August 19, 2015:
See if can find alt to image fill.js so I can test if it's bugging for some reason
Thx!
Taylor Bernard on August 19, 2015:
Taylor Bernard on August 19, 2015:
http://pioul.fr/jquery-imagefill
http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat
Justin Bernard on August 19, 2015:
http://client.fleeangrybear.com/webb/goldrush/
Taylor Bernard on August 19, 2015:
Justin Bernard on August 19, 2015:
http://christianvarga.com/jquery-resize-image-to-parent-container-plugin/
worked the best of all i tested, and by default it was responsive
Taylor Bernard on August 19, 2015:
Justin Bernard on August 19, 2015:
i didnt see it mentioned anywhere
http://christianvarga.com/jquery-resize-image-to-parent-container-plugin/
see if you can find anything, and test on your pc/ie, see what it does
thx