I was wondering, when making onepage websites, the first section is 100% height and the rest is different sizes.
How to make the first section to be 100% height of the viewport and in the same time to make it responsive?
I would suggest doing this with JavaScript instead of trying to hack CSS to do what you want. It should be a fairly simple 3 line document ready function call.
E.g.
$( document ).ready(function() {
$('#top-content').height( $(window).height() );
});
You could also listen to browser resize events to adjust the size on change.
function resizeTopContent(){
$('#top-content').height( $(window).height() )
}
$(document).ready(function() {
resizeTopContent();
});
$(window).resize(function() {
resizeTopContent();
});
why don't you use the CSS "Viewport Units" properties.
<div id="fullSize">Body Content</div>
#fullSize {
height: 100vh;
width: 100vw;
}
http://caniuse.com/#feat=viewport-units
Viewport units give you a way to scale your design depending on the size of your device. The best of it? It will adapt the resolution instantly when resizing the screen.
Values are to be given in percent (from 1 to 100).
Here are the VP Units that you can use.
vh: VP height
vw: VP width
vmin: VP min height
vmax: VP max height
add:html,body{height: 100%;}to your css and the DIVcan be set a height of 100% of viewport.
Related
So, I have an art website, with each work getting its own page. The works are mostly photos, meaning they have higher resolutions than most screens are capable of displaying - so they need to be resized down to scale, obviously.
To make works easier to look through, I display them such that they take up most of the screen (minus 100px in either dimension), scaling to fill whichever dimension is more limiting:
Work X is square-shaped, and on the average monitor it gets resized so that its height fills the entire vertical space, and its width scales accordingly - preserving the aspect ratio
Work Y is tapestry-shaped, and gets resized so that its width fills the entire horizontal space, and its vertical space gets resized to match that aspect ratio.
I'm currently using a straightforward Javascript script for this, calling a function on the img tag's onload (as well as whenever the window is resized) to calculate the desired width/height of the image and apply that. The problem with using Javascript for this is that there's a delay between when the image begins to load and when it resizes, which makes the page look really ugly for a while, especially when viewing the site on a poor internet connection.
Leading to my question: is there a way to resize images to a certain percentage of screen size, while preserving aspect ratio, in pure CSS?
This answer provides another Javascript solution, but I'd prefer to find a way to do this in pure CSS if possible.
My current script is this:
function setGoodHeight (element) {
if( on mobile ) {
...
}
else {
height_buffer = 100
width_buffer = 100
height_diff_pct = element.naturalHeight / window.innerHeight
width_diff_pct = element.naturalWidth / window.innerWidth
if(height_diff_pct > width_diff_pct) {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.height = window.innerHeight - height_buffer;
element.width = w * element.height / h;
}
else {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.width = window.innerWidth - width_buffer;
element.height = h * element.width / w;
}
if(element.width < 540) {
element.parentNode.setAttribute("style","width:" + 540 + "px");
}
else {
element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
}
}
}
Using the vw and vh units in CSS allow you to size things based on the browser viewport rather than parent elements.
If you set the max-width and max-height for the image it should constrain the image to be no bigger than the browser viewport size for any browser size.
#image-id {
max-width: 80vw;
max-height: 80vh;
}
Tell your images to be at most 100% width of the container they are in, and height set to auto will maintain aspect ratio.
.my-image-class {
max-width: 100%;
height: auto;
}
How about using background-size: cover; for this?
Every image can be the background of a div, which in turn has the following properties set.
height
width
background-size: cover;
background: url('img.png') center center no-repeat;
JavaScript is the best answer but if you really want to only use css you can use percentages rather then px these will scale to a given container.
.img {
max-width:100%;
max-height:100%;
}
here is a similar question and answer: StackPost
I need to set a div height based on screen resolution. I am using angular 5 for coding. Even when the screen is zoomed in or zoomed out the div height should fit the place
This is my html part
<div [style.height.px]="divHeight">
</div>
And in my ts file
this.divHeight= window.innerHeight - 202;
This works only when my screen is 100% zoom. I need the div height adjusted even when the screen is zoomed in or zoomed out. Plz help me out.
Why not just use the vh property -- perhaps with calc?
div.thatShallNotBeNamed {
height: calc(100vh - 202px);
}
Edit:
vh stands for "view height." It also has a corresponding property for "view width" called vw
Window.innerHeight work for even zoom out and zoom in as well.
I assume the problem your are facing is you are not resetting height for div when you zoom in or out, you can use host listener for this purpose.
#HostListener("window:resize")
onResize() {
this.divHeight = window.innerHeight - 202;
}
I am working with grid layout design. But i dont how to resize the div height as proportional to width. I need to resize the div height in responsive. Let me know pls if have any script..
For example, just add resize event listener and set height to elements:
var RATIO = 0.7;
$(window).on("resize", function() {
$("#mydiv").height($("#mydiv").width() * RATIO);
});
https://jsfiddle.net/teu7vere/
I have set the height and width of my parent div to:
width:1060px;
height:650px;
Which gives me an appearance as far as its size in Chrome on my 720 laptop but when I plug the 1080 TV through the HDMI it's too little on the screen.
I wonder if there is a way to resize the parent div to keep the same distance I get from top/bottom/right/left for 16:9 ratio.
Yes, you need to trigger a resize on the container each time on orientation change with js, then calculate your designed width height aspect ratio, then resize your container to screen.height, then multiply your screen height * your desired aspect, then that result is your width, then check if your width is not minor than screen width, if not is good, if true make the same but in backwards, dividing screen width / desired aspect ratio. lastly center your container in the screen with js or css.
that is the idea, i know works because i ve done it, probably there will be an easy way to accomplish the same.
In this way you can build percentually inside the container and will allways look the same in any kind of stuff, the only change will be a strip on the width or height depending your aspect ratio and your device specs, but it will be allways at biggest possible way.
EDIT,
Is something like;
var ratio = 1060/650;
$(window).on('resize', function() {
$('#container')
.css({width: screen.width + 'px', height: screen.width*ratio + 'px'});
if ($('#container').height() > screen.height) {
$('#container')
.css({width: screen.height/ratio + 'px',height: screen.height+'px'});
}
$('#container').css({left: (screen.width - $('#container').width()) / 2+'px',
top: (screen.height - $('#container').height()) / 2+'px'});
});
In jsfiddle wont be nice as this is using screenwidth (you could also use innerHeight, depends if you are going full screen).
Didnt test it but thats the general idea
What you want is a responsive design. In order for your page to resize, you have to start using percentages instead of fixed widths.
For example, change your width:1060px; to width:90%;. The height can stay the same, but if you wanted it to get taller, you can set height:100% and that adjusts according to the content on the page.
Also, instead of using px for text-size, use em. em is like percentages for text.
Here is a great tutorial that helped me a lot with responsive design.
Use CSS media Queries to specify styles for different screen resolutions & sizes. Your browser will choose the respective style depending on the size of the view port.
Read more about that here -> https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I am trying to adapt the dimensions of some items on my HTML page to the size of the window. I know it can be done quite easily with JQuery with something like :
$(window).resize(function(){
var width = $(this).width();
$(item).css('height',(height * w / h)+ 'px'); // w and h are variables used to calculate the ratio
});
However I am looking for a way to do it with CSS.
I have an centered item that occupies 40% of the width of the window. So when the width of the window is reduced, the width of the item is reduced too, but the height is the same. So all I want is the ratio to be the same.
You can set the height to 0, and then add a padding-bottom: X% where X is the image's aspect ratio. You can get the ratio with SASS by using
.element{ padding-bottom: percentage(height/width); }
Also, this can be used in conjunction with a background image and using background-size:cover; to make the image responsive.