I am just starting out in html and css and am not sure why my selector is not shrinking my image, can you help me out?
I created a flex-box to put both the image and the caption in, and I plan on adding a paragraph of text on the left side of the screen also in the flex-box which I will also include in the flex-box, but the problem is i can't shrink the image while it's in the flex-box without using a selector for all images instead of for this specific one, what am I doing wrong?
Edit: Made the code reproducible as per requested
#img-container {
display: flex;
flex-direction: column;
align-items: end;
}
#selfie {
flex-basis: 10%;
min-height: auto;
}
#selfie-caption {
justify-content: flex-start;
}
<html>
<link rel="stylesheet" href="resume.css">
<main id="main">
<title>My Name</title>
<div id="img-container">
<figure>
<img id="selfie" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/220px-2010-kodiak-bear-1.jpg">
<figcaption id="selfie-caption">An Image Of Me</figcaption>
</figure>
</div>
</main>
</html>
flex-basis not works, because you set display: flex to #img-container. So your flex item is figure and not #selfie and #selfie-caption. So flex-basis: 10% not give a meaning for that. So should:
figure{
display: flex;
flex-direction: column;
}
#selfie {
flex-basis: 10%;
min-height: auto;
}
Related
I have below markup for testing flexbox:
<html>
<head>
<style>
.parent{
display: flex;
flex-direction: column;
}
.parent>div>button{
display: flex;
}
.parent>div:nth-child(2){
display: flex;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1"><button>butt1</button><button>butt7</button></div>
<div class="div2"><button>butt2</button><button>butt3</button><button>butt4</button>
<button>butt5</button><button>butt6</button></div>
</div>
</body>
</html>
Its output is given below:
What I don't understand is that even if we haven't given any flex-direction: column to the div1 i.e., we haven't written:
.parent>div>button{
display: flex;
flex-direction: column;
}
even then butt1 and butt7 are aligned in column. Why they are not aligned in row?? Is it the case that child div inherits the value of flex-direction of parent? I have read that default value of flex-direction is row. So, with that logic as well, they should have been aligned row-wise, not column-wise.
Please help me to find the reason of above behaviour.
Thank You.
The problem is in this:
.parent>div>button{
display: flex;
}
You overwritten default style of button, which is display: inline-block. display: flex works for children not for element itself, so your buttons behave like normal div (display: block). If you want to use flex in your way even if it's inappropriate change it to display: inline-flex.
More precise information directly from specification:
flex -
This value causes an element to generate a flex container box that is block-level when placed in flow layout.
inline-flex - This value causes an element to generate a flex container box that is inline-level when placed in flow layout.
#IMPROVEMENT
You have a lot of code that is not needed.
You can achieve same result by:
.parent > div {
display: flex;
}
<div class="parent">
<div>
<button>butt1</button>
<button>butt7</button>
</div>
<div>
<button>butt2</button>
<button>butt3</button>
<button>butt4</button>
<button>butt5</button>
<button>butt6</button>
</div>
</div>
If you want to apply a flex to the div1 do it like this:
.parent>.div1{
display: flex;
}
See here, I've added a background color for you to see what's going on:
.parent {
background: red;
display: flex;
flex-direction: column;
}
.parent>.div1 {
background: blue;
margin: 10px;
display: flex;
}
.parent>div:nth-child(2) {
background: green;
margin: 10px;
display: flex;
}
<div class="parent">
<div class="div1">
<button>butt1</button><button>butt7</button>
</div>
<div class="div2">
<button>butt2</button><button>butt3</button><button>butt4</button>
<button>butt5</button><button>butt6</button>
</div>
</div>
this line of CSS is the issue:
.parent>div>button{
display: flex;
}
You are telling css CSS using > that rules will be applied to elements which are direct children of the .parent -> div -> button element.
.parent {
display: flex;
flex-direction: column;
}
.parent>div:nth-child(2) {
display: flex;
}
<div class="parent">
<div class="div1"><button>butt1</button><button>butt7</button></div>
<div class="div2"><button>butt2</button><button>butt3</button><button>butt4</button>
<button>butt5</button><button>butt6</button></div>
</div>
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
The R, P, and S end up being stacked on top of each other in a column rather than being side by side.
I've been going through freeCodeCamp and theOdinProject and this issue has come up a few times for me, I usually ended up just assigning each div an ID and using CSS to target it with a 'display: flex.'
I figured I should finally find out why this isn't working so if someone could please explain it to me, I'd greatly appreciate it!
Here's my HTML:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
flex-direction: row;
}
<html>
<head>
<link rel='stylesheet.css' type=text/css href='stylesheet.css'>
</head>
<body>
<div class='keys'>
<div data-key='82' class='key'>
<kbd>R</kbd>
</div>
<div data-key='80' class='key'>
<kbd>P</kbd>
</div>
<div data-key='83' class='key'>
<kbd>S</kbd>
</div>
</div>
</body>
</html>
You don't need the "flex: 1".
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
^ should do it.
If you want to space the items, try justify-content: space-evenly
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/
I've used the CSS flex box layout which appears as shown below:
If the screen gets smaller it turns into this:
The problem is that the images are not resized keeping the aspect ration from the original image.
Is it possible to use pure CSS and the flex box layout to let the images be resized if the screen gets smaller?
Here is my html:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
my CSS:
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
img {max-width:100%;} is one way of doing this. Just add it to your CSS code.
http://jsfiddle.net/89dtxt6s/
I came here looking for an answer to my distorted images. Not totally sure about what the op is looking for above, but I found that adding in align-items: center would solve it for me. Reading the docs, it makes sense to override this if you are flexing images directly, since align-items: stretch is the default. Another solution is to wrap your images with a div first.
.myFlexedImage {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
You might want to try the very new and simple CSS3 feature:
img {
object-fit: contain;
}
It preserves the picture ratio (as when you use the background-picture trick), and in my case worked nicely for the same issue.
Be careful though, it is not supported by IE (see support details here).
If you wish to specify a specific aspect ratio, you can combine it with the aspect-ratio property
img {
object-fit: contain;
aspect-ratio:2/1;
}
I suggest looking into background-size options to adjust the image size.
Instead of having the image in the page if you have it set as a background image you can set:
background-size: contain
or
background-size: cover
These options take into account both the height and width when scaling the image. This will work in IE9 and all other recent browsers.
In the second image it looks like you want the image to fill the box, but the example you created DOES keep the aspect ratio (the pets look normal, not slim or fat).
I have no clue if you photoshopped those images as example or the second one is "how it should be" as well (you said IS, while the first example you said "should")
Anyway, I have to assume:
If "the images are not resized keeping the aspect ration" and you show me an image which DOES keep the aspect ratio of the pixels, I have to assume you are trying to accomplish the aspect ratio of the "cropping" area (the inner of the green) WILE keeping the aspect ratio of the pixels. I.e. you want to fill the cell with the image, by enlarging and cropping the image.
If that's your problem, the code you provided does NOT reflect "your problem", but your starting example.
Given the previous two assumptions, what you need can't be accomplished with actual images if the height of the box is dynamic, but with background images. Either by using "background-size: contain" or these techniques (smart paddings in percents that limit the cropping or max sizes anywhere you want):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm
The only way this is possible with images is if we FORGET about your second iimage, and the cells have a fixed height, and FORTUNATELY, judging by your sample images, the height stays the same!
So if your container's height doesn't change, and you want to keep your images square, you just have to set the max-height of the images to that known value (minus paddings or borders, depending on the box-sizing property of the cells)
Like this:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
</div>
</div>
</div>
And the CSS:
.content {
background-color: green;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
border: solid 10px red;
text-align: center;
height: 300px;
display: flex;
align-items: center;
box-sizing: content-box;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height:100%
}
http://jsfiddle.net/z25heocL/
Your code is invalid (opening tags are instead of closing ones, so they output NESTED cells, not siblings, he used a SCREENSHOT of your images inside the faulty code, and the flex box is not holding the cells but both examples in a column (you setup "row" but the corrupt code nesting one cell inside the other resulted in a flex inside a flex, finally working as COLUMNS.
I have no idea what you wanted to accomplish, and how you came up with that code, but I'm guessing what you want is this.
I added display: flex to the cells too, so the image gets centered (I think display: table could have been used here as well with all this markup)
HTML:
<div class="container">
<div class="box">
<img src="http://lorempixel.com/1600/1200/" alt="">
</div>
</div>
CSS:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: hsl(0, 0%, 96%);
}
.box {
border-radius: 4px;
display: flex;
}
.box img {
width: 100%;
object-fit: contain;
border-radius: 4px;
}
That's how I would handle different images (sizes and proportions) in a flexible grid.
.images {
display: flex;
flex-wrap: wrap;
margin: -20px;
}
.imagewrapper {
display: flex;
justify-content: center;
align-items: center;
width: calc(50% - 20px);
height: 300px;
margin: 10px;
}
.image {
display: block;
object-fit: cover;
width: 100%;
height: 100%; /* set to 'auto' in IE11 to avoid distortions */
}
<div class="images">
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/800x600" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/1024x768" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/1000x800" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/500x800" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/800x600" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/1024x768" />
</div>
</div>
Set a width of 50% or a specific number for your cell div.
And for the img tag, set the width to 100%.
This way, the width will have to be 100% all the time and height will change accordingly keeping the aspect ratio the same.
You can do it easily with grid:
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
I am using jquery or vw to keep the ratio
jquery
function setSize() {
var $h = $('.cell').width();
$('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize);
vw
.cell{
width:30vw;
height:30vw;
}
.cell img{
width:100%;
height:100%;
}