I have a basic flexbox container with 2 items..
html, body {
margin:0;
}
.container {
display: flex;
flex-direction:row;
}
.item div {
width: 100%;
padding-bottom: 56.25%;
background: gold;
}
img {
max-width:100%;
object-fit:cover;
}
<div class="container">
<div class="item">
<div>
<img src="https://placeimg.com/1000/1000/any/grayscale">
</div>
</div>
<div class="item">
<div>
<img src="https://placeimg.com/1000/1000/any/grayscale">
</div>
</div>
</div>
Following the code at Maintain the aspect ratio of a div with CSS - I am trying to make the 2 items 16:9. But it is not working as expected.
Where am I going wrong?
Your problem is that the img elements inside the child divs are altering the height. Then the padding is being applied on top of that. You'll see what I mean if you remove the img.
To get around this, you can add the image as: background: url('imageurl'). Then add: flex-basis: 50% to your children and voila!
Did someone say codepen?
Related
So I have a flex container with 6 flex items and images inside of them. I need to display them as shown in the picture below:
So I want to have flex items of different sizes in two lines, and to fit images to fill a div.
But my layout looks like this:
HTML:
<div class="pic_container">
<div class="pic_block">
<img src="img/pic_1.jpg" id="block1">
</div>
<div class="pic_block">
<img src="img/pic_2.jpg" id="block2">
</div>
<div class="pic_block" id="block3">
<img src="img/pic_3.jpg">
</div>
<div class="pic_block" id="block4">
<img src="img/pic_4.jpg">
</div>
<div class="pic_block" id="block5">
<img src="img/pic_5.jpg">
</div>
<div class="pic_block" id="block6">
<img src="img/pic_6.jpg">
</div>
</div>
CSS:
.pic_container{
display: flex;
justify-content: center;
flex-wrap: wrap;
width:100%;
height:1100px;
background-color: black;
}
.pic_block{
flex: 1 1 auto;
border: 1px solid white;
}
#block1, #block2, #block5, #block6{
width:30%;
}
#block3, #block4{
width:39%;
}
.pic_block img{
object-fit: contain;
width:500px;
}
So I tried to do as in the example, making div widths as 30% and 39%, so two divs with 30% and one div with 39% would fill the whole screen, but instead, third div just goes to the next line.
First things first, you are giving a width (30% and 39%) to your image containers, just to overwrite it with width: 500px; to your img tags themselves, change that to 100%.
Second, your block1 and block2 tags are put on the img tag instead of div so the whole thing breaks. thats why your 2 first images look so different.
Last, remove flex: 1 1 auto; from your .pic_block class.
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 3 years ago.
I'm trying to put two images side-by-side (occupying the rest of the body) bellow my header, but I didn't find I good solution yet.
I want these two images to be a link for two different pages.
I have tried different things but neither of them worked.
HTML:
<body>
<div class="header">
<div class="logo">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="wrapper">
<div class="nav">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="box">
<a href="./Atower.html">
<img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
</a>
</div>
<div class="box">
<a href="./muda.html">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA B (3).jpg" width="100%" >
</a>
</div>
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
.container {
display: inline-flex;
}
.box {
width: 50%;
}
.container {
float: left
}
.box {
width: 50%;
}
All my code is here;
It seems that using flexbox or float I cannot display each image with half of
the total width each, and 100% of the body height, I always have 50% of the
height below the images in white,
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br
Use flexbox and set margin:0 and padding:0.
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}
Make the <a> tag a block styled element so it neatly wraps your image. Then stretch your image to the full height and width of its parent and use object-fit: cover to make the image fill your box.
This will have the same effect as on a background-image with the background-size set to cover.
.box a {
display: block;
width: 100%;
height: 100%;
}
.box img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
I have created a showcase section where in I have used flexbox to align images to the right. However when I shrink the size of the window, the images go out of the window. I am looking for something like this: http://jsfiddle.net/xLc2Le0k/15/
Here is the snippet for HTML:
<div class="showcase shadow">
<div id="places">
<p class="category">Places</p>
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
Here is the snippet for SCSS:
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
}
}
}
Here is the link for the live web page: https://swizzx.github.io/Photography-Portfolio/
Just a heads up, I have tried setting the width of the parent and the element to 100%, when I do so, it shrinks but does not work as how I want it to like in the JSFiddle provided above. On the contrary setting the width to 100% makes the first image equal to the size of the others which I don't want.
You should add below css property to the flex container. It wraps elements automatically to the next line when you shrink the window.
flex-wrap: wrap;
One thing you are missing in your code is applying 100% width to your img tag. Give img 100% width and it will work the same way you want.
#places div img {
width: 100%;
}
Actually it was the paragraph in the #places div that was causing the images to shrink much more than required. Figured out that had to place it out of the #places div and inside the .showcase div like :
<div class="showcase shadow">
<p class="category">Places</p> // like this
<div id="places">
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
and than setting the width of the images to 100% like gagan mentioned :
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
justify-content: flex-end;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
img {
width: 100%; //width to 100%
}
}
}
}
Hi,
See the screenshot, I'd like to know how I can fit my simple countdcown to always take 100% of the screen? I've made it to fit my phone, but Id like it to be 100% on the desktop aswell.
What I've tried:
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
}
But, this will only make the body 100%..
Where do I start? Does anybody have a tutorial or anything?
A simple example of using vw or vh (viewport), try it and you will see the difference.
Also with to center your element. you could use:
display: flex;
align-items: center;
justify-content: center;
Vertical Centering
REF: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Viewport
REF: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
body {
margin: 0;
}
.test1 {
background: red;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.test2 {
background: green;
width: 100vw;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.innerwraper {
height: 100px;
width: 200px;
background: aqua;
}
<div class="test1">
<div class="innerwraper">This is 100% width</div>
</div>
<div class="test2">
<div class="innerwraper">This is 100vw</div>
</div>
Automatically the height and the width of the body is 100% and it can not be changed to an other value so your code is unuseful.
To make the content take bigger height and width you should modify the css height and weight properties of the content (buttons, text inputs, divs, etc).
You will have to define all sizes, lengths and widths in 'vw' and 'vh'. It stands for viewport width and viewport height. This will tell the browser to render every objects size relative to the width of the screen (or height, depending on what you choose).
In your example every object should be about 20vh heigh, with a margin of 5vh. Four objects make then a perfect 100vh (100% viewport height).
You could start with this css:
input, div {height: 20vh; margin: 5vh 1vh;}
You can wrap the entire combination of buttons and views in a div, for example:
<div id = "wrapper"> </div>
Then inside of the div modify each element's height and width based on percentages. For example, you have 4 elements vertically, and three buttons on the bottom. So your three buttons on the bottom could be further wrapped in another div making them act as one element. Then you can split the 4 elements to height: 25%; and make width inherited.
So it would look something like this:
<body>
<div id="wrapper">
<div class="element"> insert element here such as input </div>
<div class="element"> element here such as input button </div>
<div class="element"> element here such as counter </div>
<div class="element">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
CSS:
.element{
height:25%;
width:inherit;
}
#wrapper{
height:100%;
width: 100%;
}
Above all the properties inside the block of codes if there is no * {
box-sizing: border-box;
}
The Content will not fit in...
I have a webpage containing a centered container with content and I want to display a logo next to it.
The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.
html, body {
height: 100%;
width: 100%;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
<div id="container">
</div>
<div id="lef">
</div>
A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/
This is the option that comes closed
http://jsfiddle.net/7QJQn/4/
I think that the best solution for doing something like this is just using javascript / jQuery.
Depending on which browsers you wish to support, you could use calc().
Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?
CSS (fiddle here):
#lef {
background-color:yellow;
width:calc(50vw - 100px);
height:20px;
position:absolute;
right:0;
top:0;
}
Add this to your css:
#lef{
float:left
}
And change the order of the divs in the html, like this:
<div id="lef"></div>
<div id="container"></div>
First of all, you should wrap your markup in a wrapper div so elements stay tight.
I made some changes, take a look:
<div id="wrapper">
<div id="lef">
</div>
<div id="container">
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
}
#wrapper{
width: 360px;
}
#container {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}
Example
If using flexbox is an option, you can do this with the flex-grow property:
With the following markup
<div class="main-row">
<div class="filler"></div>
<div class="row-content">Fixed width centered div</div>
<div class="filler"></div>
</div>
you need to set flex-grow: 1 on the filler divs. See this fiddle.