full height header picture - javascript

I am looking at this site here:
platetheslate
I found it from another users question on here but I have one of my own.
How do they make the header image FULL HEIGHT? I know you can get a full width/height with even CSS "cover" element but thats not what I am getting at.
How did they set it, so no matter what size your display/window it takes up the full screen (height wise), no matter what you always just see the photo UNTIL you scroll down.
Thanks in advance!

This should scale the width in proportion with the height.
#id {
position: relative;
height: 100%;
width: auto;
}

in the header's css class, do height: 100%

Note their Javascript is unminified here: http://www.platetheslate.com/wp-content/themes/twentyeleven/js/jquery.main.js
Here is the method that sets the height and width of the image:
//initHImage
function initHImage() {
var minWidth = 1100;
var holder = jQuery('#h-image');
var image = holder.find('img');
var win = jQuery(window);
var ratio = image.width() / image.height()
image.removeAttr('height width');
holder.css({
overflow: 'hidden',
position: 'relative'
});
function setSize() {
var winW = win.width();
var winH = win.height();
var W = Math.max(winW, minWidth);
var winRatio = W / winH;
holder.css({
width: W,
height: winH
});
if(winRatio > ratio) {
image.css({
width: W,
height: W / ratio,
marginTop: Math.min((W - W / ratio) / 2, 0),
marginLeft: 0
});
}
else {
image.css({
width: winH * ratio,
height: winH,
marginTop:0,
marginLeft: Math.min((W - winH * ratio) / 2, 0)
});
}
}
setSize();
win.bind('resize orientationchange', setSize);
}

Related

how to change bitmap image width and height in createjs

I have created a game in createjs. For images I am using bitmap to load them. I am able to give them positioning in my grid. I'm trying to change its width and height but its not working.
// this is where i am loading the image.
buttonSolve = new createjs.Bitmap(loader.getResult("buttonCategory"));
centerReg1(buttonSolve);
// i have tried a bunch of methods but none worked.
// buttonSolve.setDrawSize(200, 100);
// buttonSolve.sourceRect = { width: 280, height: 150 };
// buttonSolve.width = buttonSize.w;
// buttonSolve.height = buttonSize.h;
// buttonSolve.setBounds(0, 0, 250, 400);
// this is centerReg1 function:
function centerReg1(obj) {
obj.regX = 195;
obj.regY = 80;
// obj.setBounds(0, 0, 250, 100);
// obj.scaleX = -2;
// obj.x = canvasW / 2 - 120;
// obj.y = (canvasH / 100) * 75;
// obj.sourceRect = { width: 280, height: 150 };
}
kindly someone tell me how to do this!
I am not 100% sure
but you can solve this issue by using scaleX & scaleY properties of
buttonSolve bitmap
buttonSolve.scaleX = newWidth / originalWidth;
buttonSolve.scaleY = newHeight / originalHeight;
2nd method
buttonSolve.setTransform(0, 0, newWidth/originalWidth, newHeight/originalHeight);
Here
originalWidth & originalHeight are the original width & height
newWidth & newHeight are the updated width & height

javascript math: what is the height of the image

What is the css height of the image if the width is for example: 3px?
original image height is 400px;
original image width is 800px;
what I've tried is:
convert the 3px to a percentage of the original image width:
function perwVal(v){
return 100 * v / iow; //img orig width
}
function perhVal(v){
return v / 100 * ioh; // img original height
}
var imgwidthPerc = perwVal(3);
var imgheightPerc = perhVal(imgwidthPerc);
// not correct the height is off
any help will be appreciated.
You get the ratio of the width vs. height:
const ratio = originalWidth / originalHeight;
and then to find the width for a different height:
const newWidth = newHeight * ratio;
In your example:
const originalHeight = 800;
const originalWidth = 400;
const ratio = originalWidth / originalHeight;
const newHeight = 3;
const newWidth = newHeight * ratio;
console.log(newWidth);
But note Sebastian's point that you may not need it, you may be able to use CSS's aspect-ratio.

HTML video resize to always fit

I am looking for simple solution to always keep aspect ratio of a video but also to always fit the video inside the browser window for both the width and the height.
So far all the solutions I have found have been fitting only by width, but I need also to fit height. :}
Bootstrap does this. The trick is that CSS padding bottom is computed based on the width of the element.
.video-container {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%; /* calculate by aspect ratio (h / w * 100%) */
}
.video-container .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<video class="video"></video>
</div>
See this example. It works with <embed>, <object>, <iframe>, and <video> tags. My example is just a colored <div> that keeps its' aspect ratio constant.
I wrote this for images originally for another question on SO, but it should work for just about any element. Just change the first variable to match your video element. You can also drop the for loop if you are only resizing a single element.
JS:
function resize() {
var img = document.getElementsByTagName('img');
var w = window.innerWidth;
var h = window.innerHeight;
//console.log(w);
//console.log(h);
for (i = 0; i < img.length; i++) {
var ratio = (img[i].clientHeight / img[i].clientWidth);
if (img[i].clientHeight > h && img[i].clientWidth < w) {
img[i].style.height = h + "px";
img[i].style.width = (h / ratio) + "px";
}
if (img[i].clientHeight <= h && img[i].clientWidth < w && ratio > 1) {
img[i].style.height = h + "px";
img[i].style.width = (h / ratio) + "px";
}
if (img[i].clientWidth >= w) {
img[i].style.width = w + "px";
}
if (img[i].clientHeight < h && img[i].clientWidth <= w && ratio < 1) {
img[i].style.width = w + "px";
}
}
}
resize();
window.onresize = resize;
JSFiddle: https://jsfiddle.net/hopkins_matt/k7t26sw5/
You could try the CSS only route. YouTube had the solution I was looking for which was keeping width, and height in a 16:9 ratio.
video {
width: 100%;
min-height: 480px;
height: calc((9 / 16) * 100vw);
max-height: calc(100vh - 169px);
}
With HTML5, the aspect of the video will mold to the parent no matter the video's ratio.
Try with Javascript...
function updateHeight()
{
var videoHeight = 9 * videoDom.offsetWidth / 16;
videoDom.style.height = vidoeHeight + "px";
}
window.onload = function()
{
updateHeight();
}
window.onresize = function()
{
updateHeight();
}
Assuming your video has 16:9 aspect ratio.

Javascript function not giving expected results for image

This code when run should resize the height and width that a image to fit the container.
This is the output from the code(from alerts):
2488: Images natural height
3264: Images natural width
450: The containers height
1063: The containers width
612: New height
844: New width
4: The number of times it was divided to get to output
**It should divide it 6 times to provide the outcome of:
New width: 544
New height: 414
**
I am almost certain that the problem is in the Java Script:
function resize(iid, eid) {
//Get the ID of the elements (ele being the container that the image is in and img being the image its self)
var img = document.getElementById('img');
var ele = document.getElementById('contaner');
//makes the var needed
var currentwidth = ele.clientWidth;
var currentheight = ele.clientHeight;
var naturalheight = img.naturalHeight;
var naturalwidth = img.naturalWidth;
var newheight = naturalheight;
var newwidth = naturalwidth;
var x = 0;
//runs a loop that should size the image
while (newheight > currentheight && newwidth > currentwidth){
x = x + 1;
newheight = naturalheight / x;
newwidth = naturalwidth / x;
}
newheight = Math.ceil(newheight);
newwidth = Math.ceil(newwidth);
//alerts out the answers
alert(naturalheight);
alert(naturalwidth);
alert(currentheight);
alert(currentwidth);
alert(newheight);
alert(newwidth);
alert(x);
}
#contaner {
height: 450px;
width: 90%;
margin: 5% auto;
position: relative;
}
#img {
height: 450px;
width: 90%;
}
<div id="contaner">
<img src = "..\..\Resorces\Images\SlideShow\img1.jpg" style="width:652px;height:489px;" id="img"/>
<div id="left_holder"><img onClick="slide(-1)" src="..\..\Resorces\Images\arrow_left.png" class="left"/></div>
<div id="right_holder"><img onClick="slide(+1)" src="..\..\Resorces\Images\arrow_right.png" class="right"/></div>
</div>
The problem is this line:
while (newheight > currentheight && newwidth > currentwidth)
It's stopping as soon as either width or height fits within the container, where as it seems like you want both to fit within the bounds of the container. Change to || and you'll get six iterations:
while (newheight > currentheight || newwidth > currentwidth)

How to scale an image to full screen using JavaScript?

I have an image that I would like to scale to full screen. How would I do this using JavaScript/jQuery? No animation is necessary, just resizing the image.
<img src="something.jpg" onload="scaleToFullScreen()" />
The only reliable solution is to use a formula to determine maximum scale ratio:
var $img = $('#content img'),
imageWidth = $img[0].width, //need the raw width due to a jquery bug that affects chrome
imageHeight = $img[0].height, //need the raw height due to a jquery bug that affects chrome
maxWidth = $(window).width(),
maxHeight = $(window).height(),
widthRatio = maxWidth / imageWidth,
heightRatio = maxHeight / imageHeight;
var ratio = widthRatio; //default to the width ratio until proven wrong
if (widthRatio * imageHeight > maxHeight) {
ratio = heightRatio;
}
//now resize the image relative to the ratio
$img.attr('width', imageWidth * ratio)
.attr('height', imageHeight * ratio);
//and center the image vertically and horizontally
$img.css({
margin: 'auto',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
});
If you have it outside of all elements you can just use css:
<img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />
if you do not:
<img name='myImage' src="something.jpg" onload="onResize()" />
<script>
window.onresize = onResize;
function onResize(e){
var img = var img = document.images.myImage;
if ( img.width > img.height )
img.width = window.innerWidth
else
img.height = window.innerHeight;
}
</script>
You can use viewerjs which is perfict library to able users to browse your images to view fullpage and fullscreen, slide them and view slide between them
check this link :
https://github.com/fengyuanchen/viewerjs

Categories

Resources