I have image with width: 100% so it's height is dynamic.
I want to place a div below it that will take all the height left to the bottom of the page. it is impossible to use height: calc(100% - ... ) because the image height is unknown.
What is the solution?
Thanks!
The only solution to do this is by using JavaScript.
You have to get image's height and than set div's height according to image's height.
First you have to get image's height using this:
var imgH = document.querySelector('my_img_selector').height; //pure JS
var imgH = $('my_img_selector').outerHeight(); //jQuery
Than you have to get page height:
var pageH = window.innerHeight; //pure JS - note that this may not work in all browsers
var pageH = $(window).height(); //jQuery
And than you have to set your div's height to fill rest of page
document.querySelector('my_div_selector').style.height = (pageH - imgH) + 'px'; //pure JS
$('my_div_selector').css('height', (pageH - imgH) + 'px'); //jQuery
Tada!
Hope I helped :D
Related
I have a img I dont know width and height of the image.So I have to fit this image inside a static width and height area,after searching for solution i got max-width property manage these kind of issue.
I used max-width property for my img tag.It works great.But I confused that, how the browser calculates based on this single property ,even it does not set this width as image width.
I know how to calculate the height of the image if i know the width.
Example
original width = 100px;
original height=200px;
default width = 50px;
default height = original height/original width*default width;
default height = 200/100*50 = 100px;
Result
default width = 50px; //default static width i set
default height = 100px; //dynamic based on default width and aspect ratio
MyQuestion
To find height it should have static width, but the browser(i am using mozilla), how it calculate both width and height if its max-width attribute.So does it calculates as i did?
Please help me to find this..
<img src="http://ad009cdnb.archdaily.net/wp-content/uploads/2009/11/1258661197-009-f0-reception.jpg" style="max-width:200px"/>
I'm still not entirely sure about the end result your looking for but I worked this up and it reports the original size as well as the modified size after adjusting only the width.
<html>
<body>
<img id="image1">
<hr>
<div id="result"></div>
<script type="text/javascript">
function getImgSize(img,imgelem) {
result = document.getElementById("result");
width = img.width;
height = img.height;
document.getElementById(imgelem).width = (width*2);
newwidth = document.getElementById(imgelem).width;
newheight = document.getElementById(imgelem).height;
result.innerHTML = "<br>original width: "+width+"<br>original height: "+height;
result.innerHTML += "<br>new width: "+newwidth+"<br>new height: "+newheight;
}
img1 = new Image();
img1.src="images/example_image.gif";
document.getElementById("image1").src = img1.src;
img1.onload = function() {getImgSize(img1,"image1");};
</script>
</body>
</html>
I have a container div that cover the screen with set ratio.
I want to place some elements with absolute position and to be responsive (scale down or up).
I have something like
http://jsfiddle.net/hsD2G/2/
When I shrink width or height of the browser. The element location will change and looks off. Can anyone help me about it?
Again, this is probably not the optimal solution. At least CSS can be used partly, to center the highlights image, or using %width. If you could, somehow, make the background image containing DIV to be squared, you could do it only with CSS.
Here is the Fiddle with the jquery solution.
$( document ).ready(function() {
function update(){
var top=20,left=40;
var height = $(window).height();
var width = $(window).width();
var highlights = $('#cover-img img');
if (height > width){
// Image limited by width
var blank_top = Math.round((height - width)/2);
highlights.css('top',blank_top+top);
highlights.css('left',left);
// make it responsive 1/3 ratio
highlights.width(Math.round(width/3));
}else{
// Image limited by height
var blank_left = Math.round((width - height)/2);
highlights.css('left',blank_left+left);
highlights.css('top',top);
highlights.width(Math.round(height/3));
}
}
$( window ).resize(update);
update();
)};
Hope this helps
Can someone please guide me how to get an image full screen so that it stays in the centre both horizontal and vertical like the link provided.
http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
I'm only after the background bit and i need the image in a div apposed to in the css like in the example as i am using it for a slider in wordpress.
In order to make your LayerSlider display at 100% height and width, leave the "Slider height" attribute in "Slider Settings" blank, and then use a script like the following to set the height:
<script type="text/javascript">
function resize()
{
var heights = window.innerHeight;
document.getElementById("layerslider_1").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
</script>
Insert the script into your footer.php file before the closing body tag. If your slider ID isn't number 1, then change "layerslider_1" to the correct ID.
you can add style to the div element
<div style="background: url(images/xyz.jpg) no-repeat center center fixed;">...</div>
I just took the css from your sample page and copy/pasted!
So I got the webpage to go full screen now but I am using height 100% for all my css attributes and now I am getting a scroll bar on the right side.
http://www6.luc.edu/test/cabplan/maps/index2.html
when i change the #content_container to height 89% it changes it but its looks different on other screen sizes. How do I make it so that the map is always the height up until the footer with the "esri" logo on the bottom right above the footer as well
This would be something better suited for jquery. You can call it to resize the height on load and on window resize.
To get the window height you would use
windowHeight = $(window).height();
You take this and assign it to a variable and subtract the heights of the header and footer. And in set the css by using
${'#content_container').css({width: windowHeight+"px"});
Then if someone resizes the window you run the same options in a function like the following
$(window).resize(function() {
//update stuff
});
EDIT
$(document).ready(function(){
windowHeight = $(window).height();
divHeight = windowHeight - 100 - 100; // heights of your header/footer
$('#content_container').css({height: divHeight+'px'});
});
$(window).resize(function() {
windowHeight = $(window).height();
divHeight = windowHeight - 100 - 100; // heights of your header/footer
$('#content_container').css({height: divHeight+'px'});
});
you can replace the 100's for static calls of height by assigning variable and call $('#divid').height(); Since your header is position:absolute, if you subtract the header then you will need to position the div from the top the same px.
To call js include the following before the javascript above.
<script src="http://code.jquery.com/jquery-1.6.4.min.js" />
Is there a way to treat embed players like images in a fluid design?
I usually set the width of images to 100%, and let the browser calculate the height (modern browsers scale pictures with the original aspect ratio).
That's not the case with the <embed> element. I realize that the video information isn't given, but it should be available somehow, without fixed pixel values. In most cases only 16:9 and 4:3 aspect-ratios are used. If just those two values could be added, it would be a great help.
With width="100%" and/or style="width: 100%;" the embedded video fills the container properly (horizontally). The height should be (width/4*3) or (width/16*9) but as far as I know there's no way to calculate it.
I'd prefer a solution without inline styles, and even though the height and width attributes are required/recommended I don't like to add any specified length values in HTML. A CSS solution or a "secret" parameter for the embedded video would be ideal. If there's a youtube-specific solution, that's enough for me.
This solution worked perfectly for me.
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
^ CSS only liquid youtube embed dimensions.
With this you can completely remove the height and width attributes of the iframe. It will automatically fit it's parent container's width.
You could do it with jQuery. Something like this:
HTML:
<div>
<iframe></iframe>
</div>
JS:
var width = $('div').width();
var ratio = 16/9;
var height = width/ratio + 32; /* 32px is approx. height of controls */
$('iframe').css('height', height);
You would, however have to do it on window.resize aswell, if you want that functionality.
also, check out this little jQuery plugin by über-guru Chris Coyer: http://fitvidsjs.com
I just had to do this for a project in which I had an embedded youtube video centered on the page on top of a background image which was set to display 100vh x 100vh minus a bit of space for a header and stickynav bar. It was important that the youtube video not only scale but maintain a precise 30 pixel margin from the bottom of the image.
So I set the size of the background image on page load relative to the size of the window and define the dimensions of the iframe within the onYouTubeIframeAPIReady function which is called by the Youtube API only after the frame is loaded. I've also got the same function on window resize so that it will scale fluidly if you resize the browser window.
Since the vertical margin was an important issue I started with the height, setting the height of the iframe based on the height of the background image minus the space needed for margins. I then manually calculated the 16:9 aspect ratio for the width by dividing the height by 9 and multiplying by 16.
$( document ).ready(function() {
var content = $('#hero');
var contentH = $(window).height() - 158;
var contentW = $(window).width();
content.css('height',contentH);
} );
$(window).resize(function() {
var content = $('#hero');
var iframe = $('.videoWrapper iframe');
var contentH = $(window).height() - 158;
var iframeH = contentH - 150;
content.css('height',contentH);
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
var margin = ($(window).width() - iframeW) / 2;
$('.videoWrapper').style.marginLeft = margin;
} );
<div id="hero">
<div class="container">
<div class="row-fluid">
<hgroup class="span12 text-center" role="heading">
<h1></h1>
<h2></h2>
</hgroup>
<script src="https://www.youtube.com/iframe_api"></script>
<center>
<div class="videoWrapper">
<div id="player"></div>
</div>
</center>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId:'xxxxxxxxx',playerVars: {
controls:0,enablejsapi:1,iv_load_policy:3
}
} );
var content = $('#hero');
var iframe = $('.videoWrapper iframe');
var contentH = $(window).height() - 158;
var contentW = $(window).width();
var iframeH = contentH - 150;
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
}
</script>
</div>
</div>
</div>