This question already has answers here:
What is the difference between auto-fill and auto-fit?
(3 answers)
Closed 2 months ago.
I am trying to make the spacing between the images less. I have tried grid gap, but its not seeming to make any difference. I just want to be able to control this area.
#Listed {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.Img {
width: 60px;
height: 60px;
}
<div id="Listed">
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/1">
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/2"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/3"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/4"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/34"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/6"><br>
</div>
</div>
This is caused by using auto-fill which will cause the elements to fill the entire width. Try using auto-fit with a 60px value in the minmax like...
#Listed {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}
.Img {
width: 60px;
height: 60px;
}
<div id="Listed">
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/1">
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/2"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/3"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/4"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/34"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/6"><br>
</div>
</div>
Related
I am creating this layout
My code :
<div class="tour-grid">
<div class="tgItem tg-left">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/tours/3.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/blog/2/2.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/blog/2/3.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/tours/2.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
</div>
Check my fiddle
But grid are not equal and image doesn't fit inside div.
Right div height should adjust to left col
what is rules with grid system ? should i wrap 3 div into one. ?
You can simplify your code like below
.grid {
display: grid;
grid-auto-flow: column;
grid-gap: 10px;
max-width: 600px;
margin: 20px auto;
}
.grid img:first-child {
grid-area: span 3/span 2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<img src="https://picsum.photos/id/1074/600/400">
<img src="https://picsum.photos/id/1074/300/200">
<img src="https://picsum.photos/id/1074/300/200">
<img src="https://picsum.photos/id/1074/300/200">
</div>
I have an article explaining this code and more: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#image-grid
So I´m having trouble fitting 3 images in the same row ,
The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks
HTML:
<div class="first-slot">
<div class="masonry-box post-media">
<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">'.$row['categoria'].'</span>
<h4>'.$row['titulo'].'</h4>
<small>'.$row['fecha'].'</small>
<small>'.$row['autor'].'</small>
</div>
</div>
</div>
</div>
</div>
CSS:
.first-slot {
float: left;
width: 65%;
height: 35%;
}
.last-slot,
.second-slot {
float: left;
width: 35%;
height: 28%;
}
Bootstrap
.img-fluid {
max-width: 100%;
height: auto;
}
I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need.
PS: dnt forget to include bootstrap link in your project file
.imgItem{
display: inline-block;
margin: 10px;
}
.imgContainer{
display: flex;
}
<div class="row">
<div class="col imgContainer" >
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
</div>
</div>
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I got code like this
.divA {
background: red;
width: 500px;
display: flex;
flex-direction: row;
overflow-y: scroll;
}
.epi {
width: 50%;
background: blue;
}
<div class="divA">
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
</div>
I'm expecting this
But I'm getting this
I want item in .divA has the width of 50% of .divA
Edit: Since you don't want it to wrap, but scroll horizontally, you can put it as overflow-x: scroll;
.divA {
background: red;
width: 500px;
display: flex;
justify-content: flex-start;
overflow-x: scroll;
overflow-y: auto;
}
.epi {
min-width: 50%;
background: blue;
}
<div class="divA">
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
</div>
I am making use of a gallery which represents a column containing either one or two <div> elements spanning across the entire width. The columns containing multiple <div> elements also contain images with different height and width properties. I would like these columns to be the same height and then fill the width as much as possible whenever there is extra space between them.
I would use a flexbox <div> element with a fixed width and a flex-wrap property. The <div> elements that are to span the entire width have a property max-width: 100%. A row with multiple items are inside a container <div> element which spans and then each in another box <div> element. I could get the two on the same lines, but since they vary in sizes I would not want each image to be 50% width, because then the empty space is above and below an item instead of between them.
I have tried tinkering with flex-grow, flex-shrink and flex-basis, however none of these seem ever to be exact. I also considered switching the <div> elements with two items to flex-direction: column and then wrap these. This however did not work for me.
.column {
width: 600px;
display: flex;
flex-wrap: wrap;
}
.smallContain {
min-width: 100%;
display: flex;
align-content: space-between;
}
.smallBox {
flex: 1 1 50%;
}
.largeBox {
min-width: 100%;
}
img {
max-width: 100%;
}
<body>
<div id="container">
<div class="column">
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#">
</div>
<div class="box smallBox">
<img src="#">
</div>
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
</div>
</div>
</body>
(Within the example above, the .imgS class refer to small images and .imgL class refer to large images)
Here's an example of what I'm hoping to get it to look like.
your question is a bit hard to understand, even so I gave it a try, maybe what your looking is something like this?
.grid {
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.grid .item {
max-height: 400px;
padding: 5px;
}
.grid .item.smallBox {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
.grid .item.smallBox img {
object-fit: cover;
object-position: center;
}
.grid .item.largeBox {
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.grid .item img {
height: 100%;
width: 100%;
}
<div class="grid">
<div class="item smallBox">
<img src="http://placeholder.pics/svg/280x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/280x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1920x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/480x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/250x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/250x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/480x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/500x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/150x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
</div>
Hope it helps, good luck.
I'm trying to style a gallery using Bootstrap and Flexbox where there is one large image and beside it is two smaller, stacked images and have both be the same height.
The container columns seem to be doing their job and staying the same height but I need the img within the column to fill the height of the container.
It works in Firefox if I use height: 100% on the img but this breaks in both Chrome and Safari.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin-bottom: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4">
<figure style="margin-bottom: 30px;">
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
Here's the markup and stylesheet: https://jsfiddle.net/tylorreimer/q8qe5p80/2/
Looks to me as though you need nested flexboxes where you have multiple images on one side.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin: 0;
}
.rts-col.split {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 split">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
If you make the col-4 a flex container with column direction, you can then use justify-content and its space-between to align those 2 image top/bottom
Add d-flex flex-column justify-content-between to your <div class="rts-col col-4"> so it becomes <div class="rts-col col-4 d-flex flex-column justify-content-between">
Note, I also removed some of your margins to make them align better
img {
display: block;
max-width: 100%;
}
figure {
margin: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 d-flex flex-column justify-content-between">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>