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.
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
My element's height increases depending on what the user does with it. If I give it a wrapper div, and give that div an explicit pixel height and overflow:auto, it works as I would want it to (when the element becomes bigger than the height of its parent, it doesn't increase the size of the parent). I want the wrapper div to be as big as the space available on the page, but not allow it to expand beyond that. Giving it height:100% doesn't work, it just gets bigger. Giving it height:100vh also doesn't work because there are other elements on the page and so the size is too big.
I want the wrapper div to be able to expand until it becomes too big for the viewport (which height:100vh would achieve if it were not for the other elements on the page).
Basically I'm looking for something like height : amount of available space in the viewport.
This is what I ended up doing:
var viewportHeight = $(window).height();
var offset = $('#gridWrapper').offset().top;
$('#gridWrapper').height(viewportHeight - offset);
I execute the same stuff again on resize. gridWrapper is the id of the wrapping div.
you can use height:80vh or similar depends on the height of your other elements
function resizeElement() {
var height = $(window).height();
var neededHeight = (70 * height) / 100; //If you want 70% of the viewport
neededHeight = parseInt(neededHeight) + 'px';
$("div").css('height',neededHeight);
}
$(document).ready(function() {
resizeElement();
$(window).bind('resize', resizeElement);
});
You can try this. You may need to check what value do you get in var height. Depending on that you can append px or not in neededHeight. This is basically the logic.
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.
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
This is a continuation of CSS Display an Image Resized and Cropped. The answer there seems to be okay for that user but I need some help to improve upon that answer...
Q: how can the resize (scale) be related to the size of the image at runtime. i.e. I don't want to hard code something like "width: 320px; height: 221px;" in the style - that works if you know the dimensions of the image up front.
Here are some jsfiddles:
http://jsfiddle.net/VdX68/ - based on the original thread answer. Works if you know the dimension of the image up front.
http://jsfiddle.net/VdX68/4/ - you don't have to know the dimension of the image, but only works for 100% scale. (here I simply removed the width, hight from the .scalePan class.
http://jsfiddle.net/VdX68/2/ - using width and hight as %. This scales the image to the size of the containng div not the image original dimensions.
I'm looking for a way to scale the image to a % of the original dimensions, not a % of the container it is in.
Any help much appreciated.
I understand you want to do this, but I'm not completely sure.
$(document).ready(function() {
var wdth = $('img').width();
var hght = $('img').height();
$('img').css('width', wdth / 100 * 90 + "px"); // new width is 90% width of image
$('img').css('height', hght / 100 * 70 + "px"); // new height 70% height of image
});
Working example: http://jsfiddle.net/VdX68/18/
You don't have to use JQuery, you can do this with regular javascript also.