I'm trying to build an 'elastic' website in CSS and HTML; I want there to be 6 squares along the width of the screen; I have the width of the squares scaling to the screen size, but I want to keep my squares square. Is there any way I can set the height of my div's to the same size as the div width (which is being set off of a % value).
See DEMO.
Basically, give the element the same value for the width and padding-bottom so that it will stay as a square as you scale the page.
.square {
background-color: red;
width:15%;
height:0px;
padding-bottom:15%;
display: inline-block;
}
Read more about fluid squares here.
Yes, the most common solution is to use a 1px by 1px image and make it full width with a variable height:
Demo: http://jsfiddle.net/57xhg/1/
CSS:
.wrap {
background: red;
margin: 0 auto;
width: 100px;
}
.wrap img {
width: 100%;
height: auto;
}
You can do it by using background-repeat-x and background-repeat-y property by providing the elastic line you want to draw
Related
3 grid based boxes of size 16:9 covering whole width of page should display picture in this divisions without compressing/distorting also showing the full picture. If the picture is bigger than the box then it should cover full width or full height depending on which dimension is larger and accordingly resize the other dimension.
My first issue is :
I give 100% width to each of the div inside the grid, but how much should i assign the height dimension?
Second : Assuming i have the divisions according to my requirements, how do i
display the picture inside the division?.
Current progress:
i have used this website for reference: dabblet
and used code where thumbnail-card is my div and thumbnail is my image.
.thumbnail-card {
height: 300px;
width: 100%;
background-color: black;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.thumbnail-card:before {
content: "";
width: 1px;
height: 100%;
display: inline-block;
vertical-align: middle;
margin-left: -1px;
}
.thumbnail {
max-height: 100%;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
but vertically long images don't behave as i need. Any solutions?
Pics for reference: vertical_pic horizontal_pic how it looks
Your first issue:
To retrieve a constant 16:9 ratio of your div element you should not use height, but use padding-bottom. Translate the 16:9 ratio to percentages. In your case the width is 100%. Then to calculate the padding-bottom do: 9 / 16 * 100 is 56,25% of 16.
Like this:
div {
width: 100%;
padding-bottom: 56,25%;
}
Also see this stack overflow post: Maintain the aspect ratio of a div with CSS
Your second issue:
I think object-fit: contain; is what you need: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Use it on the image element and it will contain to its parent.
Currently, I'm setting a variable to correspond to a circle's width and height, like so:
$circle-diameter: 70%;
.circle {
width: $circle-diameter;
height: $circle-diameter;
}
However, the circle's width becomes 70% of the parent element's width, and the height becomes 70% of the parent element's height, which yields an oval that is wider than it is tall. Ideally, I'd like to convert .circle-diameter to a fixed size and assign the circle's width and height to that fixed size. Is there a solution for this in CSS/SASS?
You can use padding-top instead of height, it will work because padding is relative to parent width.
.circle{
width: 70%;
padding-top: 70%;
/* height: 0; */
}
http://codepen.io/yukulele/pen/PzGgNM
What you are looking for is to have a fixed ratio between width and height. For a circle tho, the width/height ratio is 1. There's a hacky way to accomplish that task. First I'd like to write a css class that always provides us a space that has width/height ratio of 1. To do so:
See Fiddle
Why this works? Because, If you use percentage based units on padding, It always be relative to element's width. See reference
Next I always like to use absolute hack to provide myself a workaround in that nicely 1/1 ratio square that we've create.
See Fiddle 2
Using position: absolute for our own good, we've created a element that has a fixed ratio and has a working width/height properties.
After It depends on what you need to do. In your case I've created a nice circle for to examine the situation.
See Fiddle 3
Working source code
**Css**
.ratio-1 {
position: relative;
width: 100%;
padding-top: 100%;
background-color: silver;
}
.im-something-has-some-width {
width: 200px;
border: 3px solid lime;
}
.space-provider {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.yay-i-have-a-square-field {
// lets use it for our own goods!
width: 100%;
height: 100%;
background-color: skyblue;
border-radius: 50%;
}
Html
<div class="im-something-has-some-width">
<div class="ratio-1">
<div class="space-provider">
<div class="yay-i-have-a-square-field">
</div>
</div>
</div>
</div>
Could someone please help me?
I have three divs.
enter code here
The one in the middle should always be 1040px.
The left and right one shall fill the whole left space.
How can I make them proportionally grow/shrink when I resize the window?
Here is the code:
http://codepen.io/christophz/pen/413d31df9d33e1205b73bed3ebee1f5d
Thank you very much in advance!
Here is a pure CSS option using CSS display properties of table and table-cell.
DEMO: http://jsfiddle.net/audetwebdesign/a9J7D/
The markup is the same as you proposed.
The CSS is:
.container {
width: 100%;
min-width: 540px; /* you may want this... */
margin: 0 auto;
outline: 1px dashed blue;
display: table;
}
.bar-light {
width: auto;
height: 52px;
background-color: blue;
display: table-cell;
}
.bar-dark {
width: 540px;
height: 52px;
background-color: red;
display: table-cell;
}
Set display: table to .container and for the child elements, display: table-cell.
For .bar-light, set the width to auto and they will be computed to fill in the remainder of the page width (equally).
In my example, I set the center width to 540px to make it easier to see in the fiddle.
Finally, add a min-width to .container, without any content, the table cells will collapse to zero width as you shrink the window size.
Note About Heights
This layout will create three columns of equal height, the height will be computed to enclose the tallest of the three child elements.
This is real quick so it might be slightly off but you should be able to get the idea
HTML
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
CSS
div { float: left;}
.b { width: 1040px;}
JQuery
$(document).onload(resize);
$(window).resize(resize);
function resize() {
var ww = $(window).width();
var width = (ww-1040)/2;
$('.a').width(width);
$('.b').width(width);
}
Add a table with 3 column. In the middle column add you div. specify the size you want for this for these column e.g. 10-80-10. or -80-.
I want to achieve result as drawn on the image (red square is region, always fixed size, black square is the screen). I have no idea how to do this, unless here is a magical way of getting current size of screen and using conditional statements in CSS. Thanks!!
Here is the img: http://glothriel.org/uploads/layout.png
You can do it with a fixed width div and margin: 0 auto;
div {
width: 500px;
margin: 0 auto;
height: 500px;
background: red;
}
DEMO
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}