I'm trying to create a series of flexboxes with an image and text beneath. I'd like all the image heights to align, however, all the source images are of different sizes.
I searched around here and found this to be essentially the same issue, but the solution doesn't seem to work for me.
Here's what I have:
CSS:
.roster {
display: flex;
flex-wrap: wrap;
}
.roster-card {
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px #888;
width: 100%;
}
.roster-card img {
width: 100%;
height: auto;
}
.roster-card-content {
display: flex;
flex-direction: column;
width: 100%;
padding: 1.4em;
}
HTML:
<div class="roster">
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p>Link</p>
</div>
</div>
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p>Link</p>
</div>
</div>
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p>Link</p>
</div>
</div>
</div>
Media Queries (if it matters):
#media all and (min-width: 40em) {
.roster-card {width: calc(30% - 10px);}
.roster-card p, .roster-card p a {font-size: 0.9em; line-height: 120%;}
}
You want to have equals height for each of your images ?
Well you write height : auto so the height is the normal height of the image. You should define a height for exemple : height: 200px.
At the moment your image is deform cause you define a width AND a height, you should know use object-fit : contain or object-fit : cover to keep proportion
Related
I'm trying to create a 3-wide grid of equally sized images which rescale to fit the screen while maintaining a fixed height. I'm very new to html and CSS so I'm not sure how to go about resizing the images.
The basis of the html I have is:
.flexContainer {
display: flex;
height: 20vh;
}
.flexItem {
width: 33%;
height: 100%;
}
<div class="flexContainer">
<div class="flexItem">
<img src="...">
</div>
<div class="flexItem">
<img src="...">
</div>
<div class="flexItem">
<img src="...">
</div>
</div>
The questions I have are firstly am I structuring this all approximately correctly? I'm sort of just winging it up until now. And then also how do I go about styling the images to fit the box, so far everything I've tried has failed to alter the image size but that may be as I'm applying it to the wrong place or something silly.
First, remove width: 33%; on your flex items. Then add the following CSS:
.flexItem > img {
max-width: 100%;
}
See it working here:
.flexContainer {
display: flex;
justify-content: space-around;
height: 100%;
}
.flexItem {
width: 100%;
height: 100%;
text-align: center;
}
.flexItem > img {
max-width: 100%;
}
<div class="flexContainer">
<div class="flexItem">
<img src="https://dummyimage.com/300x300/000/fff">
</div>
<div class="flexItem">
<img src="https://dummyimage.com/300x300/000/fff">
</div>
<div class="flexItem">
<img src="https://dummyimage.com/300x300/000/fff">
</div>
</div>
Structure is fine. I made other style changes in your CSS but only because that is how I would do it. You can do it your way also.
I try to develop website for my portfolio. I want to do something like that :
But I've some problem with the 3 icons for Twitter/Instagram and Deviantart. To put the icons like that, I use the flexbox in html. Currently, I've that :
#conteneur {
display: flex;
justify-content: space-between;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
Test with CodePen here : https://codepen.io/lucbenedet/pen/yLbPMgK
But as you can see, the pictures are too large and when I try to put the pictures to a size of 35px like that :
#conteneur
{
display: flex;
justify-content: space-between;
width: 35px;
}
or
.element1
{
width: 35px;
}
The resize doesn't works...
Someone to show how to do that ?
You can update your CSS with following code.
#conteneur {
display: flex;
justify-content: space-between;
width: 150px;
padding: 10px;
}
#conteneur div img {
width: 35px;
height: 35px;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
You can have some space between icons when you maximize the width of the container
you can reset width on the flex-container to max-content (3 icones shouldnot overflow) and use gap to set a distance in between them.
You could use em for the gap and icon's width to have a coherent render.
Possible example:
#conteneur {
display: flex;
width: max-content;
align-items: center;
margin: auto;
gap: 1.6em;
}
#conteneur div img {
width: 3em;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
possible example from your codepen https://codepen.io/gc-nomade/pen/qBmVjBV
I'm doing some flex-grid and having problems getting inline images to scale their dimensions to match the height of a flex-grown box.
I have a flexbox column where I have a title and a wrapper that will grow to whatever space is leftover. Inside the wrapper is list of images that I would like to all have the same height and be inline. No matter what I do the images end up to the right of the title and outside the dimensions of the flexbox. Any help would be appreciated. Bad drawing included on what I would like vs what I currently get
Link to fiddle: https://jsfiddle.net/oan5fmtb/1/
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
...
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.imgs {
flex: 1;
/* Not sure if I need anything else here */
}
.img {
display: inline;
/* Not sure what to do */
}
Please try this,
.container {height: 170px;width: 100%;border: 1px solid black;}
.imgs {display: flex;}
.img{width:60px;height:60px;margin-right: 10px;}
It works as expected
Found the solution thanks to this answer.
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid black;
}
.imgs {
flex: 1;
min-height: 0;
border: 1px solid red;
}
.img {
height: 100%;
width: auto;
}
I found out that a flex item cannot shrink smaller than the size of their content, min-height: 0 will fix this.
I need my two blocks to go in a row one after another, but when the screen resolution decreases, they are placed under each other, that is, in the column
<div>
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
We can use flex (by default flex-direction is row so we don't need any other styling in css) -:
<div class="container">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
.container{
display: flex;
}
Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -:
<div>
<div class="inline">
<h1>Block1</h1>
</div>
<div class="inline">
<h1>Block2</h1>
</div>
</div>
.inline{
display: inline-block;
}
As the div element is known as a block element, you need to use display:inline-block. This means 'if there is space next to the element, place the next inline block element next to it' (in essence).
div {
display: inline-block;
background:tomato;
}
#media only screen and (max-width: 600px) {
div{
display:block;
background:green;
}
<div>
<div>1
</div>
<div>2
</div>
</div>
For your width to then turn back into a block element, you will need to use the media query - something like above.
You should use CSS grid:
<div class="wrapper">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
Css:
.wrapper{
diplay: grid;
grid-template-columns: 1fr;
}
Try using display:flex and use flexbox to place next to each other when the width is high. When the width reduces the div cols will go down.
.row {
width: 100vw;
display: flex;
flex-wrap: wrap;
}
.cols {
height: 400px;
width: 400px;
margin: 5px 5px 5px 5px;
background-color: blue;
}
<div class="row">
<div class="cols">
</div>
<div class="cols">
</div>
</div>
Like this:
#media all and (max-width: 480px) {
div{
float: left;
width: 98%;
margin-left: 1%;
overflow: hidden;
border: 1px solid #000;
box-sizing: border-box;
padding: 5px;
}
}
Or with class
.wrapper div{
...
}
More about #media
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
If you guys take a look at the code, when I add squared images (first row), the grid will fit perfectly just like instagram. I want to make different shaped images fits in this same squared width and height when I add them (second row).
The problem is, if I just try to make it a square by changing the width and height of the .column > img selector from 100% to 300px for example, the images won't resize in page responsiveness and everything becomes a mess of images overlaying each other.
body {
font-family: "Open Sans", Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 930px;
margin-right: auto;
margin-left: auto;
}
.column {
width: 33.33%;
margin-right: 30px;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 28px;
}
.column>img {
width: 100%;
height: 100%;
}
#media (max-width: 760px) {
.row {
margin-bottom: 3px;
}
.column {
margin-right: 3px;
}
}
#media (max-width: 450px) {
.row {
flex-direction: column;
justify-content: center;
}
.column {
width: 100%;
margin-bottom: 6px;
}
}
<div class="container">
<div class="row">
<div class="column">
<img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://images.unsplash.com/photo-1523354177913-be035fcee55e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1563281746-48bb478e9b2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1563170446-9c3c0622d8a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
</div>
</div>
</div>
Is there a way to make all images a square and at the same time keep the responsiveness of the width and height when resizing the page? Thanks in advance.
I made a solution. In my solution I've used object-fit property to resize image. Check it. Hope it will be helpful to you.
body {
font-family: "Open Sans", Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 930px;
margin-right: auto;
margin-left: auto;
}
.column {
width: 33.33vw; /*These properties are changed*/
height: 33.33vw; /*These properties are changed*/
margin-right: 30px;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 28px;
}
.column>img {
width: 33.33vw; /*These properties are changed*/
height: 33.33vw; /*These properties are changed*/
object-fit: cover; /*These properties are changed*/
}
#media (max-width: 760px) {
.row {
margin-bottom: 3px;
}
.column {
margin-right: 3px;
}
}
#media (max-width: 450px) {
.row {
flex-direction: column;
justify-content: center;
}
.column {
width: 100%;
margin-bottom: 6px;
}
}
<div class="container">
<div class="row">
<div class="column">
<img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://images.unsplash.com/photo-1523354177913-be035fcee55e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1563281746-48bb478e9b2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1563170446-9c3c0622d8a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
</div>
</div>
</div>
You can abuse padding for this.
tl;dr: https://jsfiddle.net/Hoargarth/u247vz0k/ Just look at the fiddle, pretty self explanatory
First of all we are using flexboxes, for this we need a flex container and flex items in it.
<div class="flex-container">
<div class="flex-item">
<div class="image-wrapper">
<div class="image" style="background-image: url('https://www.url.to/image.png');">
</div>
</div>
</div>
<!-- Any number of flex items inside container -->
</div>
I'm not explayning the flex-system here, I guess you should know about it.
But for everyone not knowing about flex, here is a pretty good explanation: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
So we start at the flex-item:
position: relative because we need the next element
(image-wrapper) to be absolute positioned to flex-item
width: 32%
becasue you want 3 images per row, don't forget to give your
flex-container a width
padding-bottom: 32% the padding is the key, 32% padding is relative to the width of the flex-container. So if you use padding-bottom: 100%, the flex-item's height would be exact same like flex-container width. In our case we want a quadratic image, so we use 32%
.flex-item {
position: relative;
width: 32%;
padding-bottom: 32%;
}
Next is image-wrapper:
position: absolute because we don't wanna take this container (or any other container inside this one) to take up any more space.
overflow: hidden to make sure nothing can escape our quadratic image and overlaps to another container
.image-wrapper {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
And last, the image itself:
No magic here, just add your background image as background-image: url() in html so you don't have to create a lot of extra classes.
position: relative I don't remember why I added it, maybe some crossbrowser related stuff. But you can try to remove it, it's working on Firefox without.
background *-size: cover so all the quadratic space gets filled, no matter what size the image is; *-position: 50% to completely center the image (vertically and horizontally); *-repeat: no-repeat you don't really need it since background-size: cover fills the whole space, I just added it so there is no special case where the image would be repeated
.image {
position: relative;
height: 100%;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
This solution is responsive out of the box, but you can change the number of Images per Row with simple Media Queries:
Example:
/*Window Width smaller 800px with two images per row*/
.flex-item {
position: relative;
width: 48%;
padding-bottom: 48%;
}
/*Window Width larger or equal 800px with three images per row*/
#media (min-width: 800px){
.flex-item {
width: 32%;
padding-bottom: 32%;
}
}
I hope it's understandable, if not let me know!