Is there a better way of doing this grid using CSS?
html, body {
margin: 0;
width: 100%;
height: 100%;
}
.grid {
overflow: hidden;
}
.box {
width: 25%;
color: #FFF;
position: relative;
float: left;
}
.box .content {
width: 100%;
padding-bottom: 100%;
background-image: url(http://placekitten.com/g/100/100);
background-repeat: no-repeat;
background-size: contain;
}
JSBin
Also is it possible to make it fit within the window's height as well as the width? ...and remove these annoying pixel width gaps that occur as particular dimensions:
If what you want is to fill the body with squares, that is a good way to do it.
If you want to fill all the height also, there are several posibilities; it's unclear what is exactly what you want. But since it seems that you want squares, the only approaches left are
Create more divs
Make the width of your squares higher than 25%
The pixel gaps happen because there are pixel roundings in the size calculus. The best way to solve that is to change background-size to cover (instead of contain)
Related
I'm trying to create a lightbox where the current image takes up 90% of the height of the page OR a 900px width, whichever one happens first.
Naturally, I used the code below, expecting it to fail. I was right. I tried using the aspect-ratio property (which is frowned on because of its lack of browser support), but nothing worked.
Anybody know how to achieve this?
/* Basically the lightbox container */
.modal {
position: fixed;
width: 100%;
height: 100%;
}
/* Each image has the class mySlides */
.mySlides {
max-width: 900px;
max-height: 90%;
margin: 15px 5%;
}
Alright, a comment from Amaury Hanser got me on the right track. The solution that worked was using object-fit: contain;. This link helped me learn what that is. The property basically makes an object fit within the borders of its parent container while maintaining its aspect ratio.
This is my code now:
.modal {
position: fixed;
width: 100%;
height: 100%;
}
.mySlides {
max-width: 900px;
max-height: 90%;
object-fit: contain;
margin: 15px 5%;
}
The image is stretched when I try to make the size smaller.
http://jsfiddle.net/QEpJH/878/
.container img {
display: block;
width: 100%;
height: 60vh;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
You need to make it scalable by 1:1
so use
width: auto; instead of width:100;.
or use height: auto; and width: 100%; in case you want to cover the whole width.
But remember if you cover the whole width, the height will increase.
If you set the width to auto, the image will adjust itself to the given height without any stretch.
.container img {
display: block;
width: auto;
height: 60vh;
}
if you set the image as a background instead and use
background-size:cover
you will lose the stretching but some of the image may get cut off
to counter this slightly you can use
background-position
to position the image in a more desirable place
Try ratio in only percentage or use similar ratio
.container img {
display: block;
width: 30%;
height: 30%;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
I'm using the technique from this answer to create a DIV that maintains its aspect ratio when the browser viewport is resized.
However, I want the DIV to only get so big and then stop. But, if I apply max-width: 300px; to the containing div, the div will stop expanding its width when the viewport gets big enough, but the height keeps going, losing the aspect ratio. If I apply max-height: 60px;, it has no effect whatsoever.
How do I get a div to expand with the width of a viewport, maintain its aspect ratio, and stop expanding both height and width at a specified maximum width?
Live code here.
body {
width: 36%;
margin: 8px auto;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
max-width: 300px;
background: blue;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
It looks like the issue is because of the padding which increases the height by % based on resize
below is the example in which i have added box-sizing:border-box; and gave height which on resize remains the same
http://dabblet.com/gist/85df841bd1602d24829f
One possible solution seems to be to simply create a containing div around the wrapper div, and apply max-width to that.
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I'm trying to imitate this image:
(original image page)
There's a shadow effect from the left column onto the right column, usually I use the faux columns method and put the background on the container but for this case the left column should be over the right column.
EDIT: I have now this base on your answer but the background on the sidebar doesn't stop at the container's height (it overflows to the bottom of the page).
#map-app {
height: 100%;
min-height: 650px;
width: 1200px;
margin: 30px auto;
background-color: #FFFFFF;
.sidebar {
background-image: url('/data/images/map/v2/sidebar_separator.png');
background-position: top right;
background-repeat: repeat-y;
position: absolute;
height: 100%;
width: 350px;
z-index: 9999;
}
.content-container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9998;
}
}
It looks like this:
Any suggestions as of how I could achieve this?
If you want to make sure that the left column will be positioned directly above the right, obviously use the z-index element and provide the left column with a shadow effect for the right border. This would allow you to fill the page entirely with the right column, and half with the left column, using z-index to set the left columns stack order above the right. I won't display any code for you if you won't show at least a snippet of what you have. Kind of pointless.
Update: You would obviously have to use position: absolute; for both columns in order to achieve this effect you are aiming for, if you set it to relative the browser would not allow them to overlap.
Update: If you're looking to stretch both columns to the height of the browser, you'd obviously use the same container for both and set it's height: 100%; The problem with having a container, left column, and right column is, you can set the container to 100% height, but that just gives the content you put inside of it 100% height, doesn't mean the content will also be exactly 100% in size. What I would recommend doing is to change the container code to height: 100%; width: 100%; and only set one <div class="container"></div>
Code Update:
.container {
height: 100%; width: 100%;
}
.leftcolumn { // Guessing this would be your .sidebar
overflow: hidden; // Option 1: Set the overflow to hidden.
position: absolute;
height: 100%; width: 50%; // Option 2: Set the height slightly lower. like 99%
z-index: 9999; // Higher than right.
}
.rightcolumn {
position: absolute;
height: 100%; width: 100%;
z-index: 9998; // Lower than left.
}