I want to align image right like banner. But when I use grid and justify-content:end, images align row.
I watched chrome inspector, it said use flex.
Why grid can't use justify-content?
body {
margin: 0;
}
.icon {
height: 30px;
width: 30px;
}
#iconbanner {
display: grid;
background-color: gray;
justify-content: end;
}
<div id="iconbanner">
<img src="blog.png" class="icon">
<img src="youtube.png" class="icon">
<img src="instagram.png" class="icon">
</div>
I tried grid and justify-contet:end; but cant' align images column.
In a grid, use justify-items instead of justify-content.
You can do it like this (I added a gap between images) :
body {
margin: 0;
}
.icon {
height: 30px;
width: 30px;
}
#iconbanner {
display: grid;
gap: 5px;
background-color: gray;
grid-template-columns: repeat(3, auto);
justify-content: end;
}
<div id="iconbanner">
<img src="blog.png" class="icon">
<img src="youtube.png" class="icon">
<img src="instagram.png" class="icon">
</div>
Related
I am using Elementor Pro and was looking to see if it is possible to create this layout with Flexbox:
I was hoping to create a gallery with this layout, but not sure if this is possible using Flexbox?
Here is the site link: https://davidandgeorge.co.uk/
Thanks for any tips.
Cheers
flex:
body {
margin: 0;
}
.wrap, .flex-col {
display: flex;
}
.flex-col {
flex-direction: column;
}
.wrap {
padding: .25rem;
flex-grow: 1;
}
.basis-1\/3 {
flex: 0 0 33.333333%;
}
.aspect-4\/5 {
aspect-ratio: 4/5;
}
.wrap img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="wrap">
<div class="wrap aspect-4/5">
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1653045352509-PWI7Q226NN0ZD85GVHR8/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-makers-weaver-woven-textiles-majeda-clarke-min.jpg?format=2500w" />
</div>
<div class="flex-col basis-1/3">
<div class="wrap">
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648550640739-ABYK0CIPHJIZ9V1LQ872/squarespace-website-design-food-and-drink-london-dry-gin-spirits-uk-no-3-gin-thumbnail-min.jpg?format=1000w" />
</div>
<div class="wrap">
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648551399057-U3TMJ3YJMHZRK1W8D3LL/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-consultants-media-and-content-creators-professional-business-bespoke-pr-campaigns-luxury-travel-wellness-lifestyle-nadia-walford-pr-min.jpg?format=1000w" />
</div>
</div>
</div>
grid:
body {
margin: 0;
}
.grid-1 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: .5rem;
padding: .5rem;
}
.grid-1 div:first-child {
grid-area: 1/1/3/2;
aspect-ratio: .8;
}
.grid-1 div img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
<div class="grid-1">
<div>
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1653045352509-PWI7Q226NN0ZD85GVHR8/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-makers-weaver-woven-textiles-majeda-clarke-min.jpg?format=2500w" />
</div>
<div>
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648550640739-ABYK0CIPHJIZ9V1LQ872/squarespace-website-design-food-and-drink-london-dry-gin-spirits-uk-no-3-gin-thumbnail-min.jpg?format=1000w" />
</div>
<div>
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648551399057-U3TMJ3YJMHZRK1W8D3LL/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-consultants-media-and-content-creators-professional-business-bespoke-pr-campaigns-luxury-travel-wellness-lifestyle-nadia-walford-pr-min.jpg?format=1000w" />
</div>
</div>
Grid has slightly cleaner syntax, for both CSS and HTML so... why flex?
It is. I would create a wrapper div for all of the images, then another wrapper div for the two smaller images aside.
Then, just use display: flex for the big wrapper, and display: flex with flex-direction: column for the smaller one.
I have a two column layout. Left has an image. Right has 2 images on top of each other. My goal is to have the images increase as much as possible but have to keep their aspect ratio. And of cause can't overflow outside the containing height.
Right now if you change the width of the browser window, the image resize respecively in a correct way. But if you decrease the height of the window, the images does not decrease in size.
Any tips.
outer-container has height calc(100vh -100px). it is suppose to simulate having a sticky footer.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
}
.right-image {
width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
Just add max-height properties to the .left-image and .right-image rules so they do not overflow their parent containers.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
max-height: 100%;
}
.right-image {
width: 100%;
max-height: 50%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
This might work as a starting point. Not 100% sure how you want the first column in relation to the second.
I added a footer since you seemed to indicate that?
.outer-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 100px;
background-color: green;
height: 100vh;
}
.left-column {
/* keeps the left image in the box */
min-height: 0;
grid-row: 1 / 2;
grid-column: 1 / 1;
border: solid cyan 2px;
display: flex;
justify-content: center;
}
.right-column {
border: solid yellow 2px;
display: flex;
align-items: start;
justify-content: top;
flex-direction: column;
}
.left-image {
height: 100%;
}
.right-image {
width: 100%;
}
.footer {
/* put accross all columns of last row and super center content */
grid-column: 1 / 3;
grid-row: 3 / 3;
background-color: #ffdd88;
display: grid;
align-items: center;
justify-content: center;
}
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</div>
<div class="footer"> I am the footer thing</div>
</div>
Consider this…
You are creating three column layout using grid system. Your container is fixed sized and centered using margin:0 auto.
Your design specs calls for first column to have background color that extends to the left edge of browser.
Any idea how you can achieve this? I could make it work this way, which is kind of a hack and it may not work for certain kind of image backgrounds.
HTML:
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3<h2>
</div>
</div>
</section>
</main>
CSS
main {
min-width: 800px;
}
section {
background-image: linear-gradient(to right, #dfdfdf 50%, #fff 50%);
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin:0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section > * {
min-height: 200px;
}
.container > div {
background-color: #fff;
padding-left: 30px;
}
You could also generate the background using a pseudoelement.
The left value is large enough to keep the background extending out of the screen. It may be problematic if you need precise position of a background image.
Also, you could consider grid-gap instead of adding padding-left to the grid items.
body {
margin: 0;
}
main {
min-width: 800px;
}
section {
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section>* {
min-height: 200px;
}
.container>div {
background-color: #fff;
padding-left: 30px;
}
header {
position: relative;
}
header:before {
content: '';
background: lightgrey;
display: block;
position: absolute;
left: -50vw;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
}
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
You could try making the columns stretch the full width of the container, and then aligning the content inside to appear as three centered columns.
.container {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-column-gap: 20px;
min-height: 50px;
}
header {
background-color: lightgray;
display: flex;
justify-content: flex-end;
}
section {
border-bottom: 1px solid #dfdfdf;
}
body {
margin: 0;
}
p { text-align: center;}
p > span { padding: 5px; background-color: aqua; }
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
<p><span>True Center</span></p>
codepen demo
In this JSFiddle how can I downsize the img / img-container to be only as wide as its widest sibling div?
.outer {
display: inline-flex;
flex-flow: column;
}
.outer span {
display: flex;
}
div {
border: 1px dotted black;
}
<div class="outer">
<div>
<span>text</span>
<span>more text</span>
</div>
<div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
</div>
<div>
<span>this should determine width</span>
</div>
</div>
I'm not sure how cross-browser compatible this solution is, but it works on Chrome 64, Safari 11, and Firefox 57.
Give the element containing the img a width: 0; min-width: 100%; max-width: 100%;, and the img itself a width: 100%;.
Like this:
div {
border: 1px dotted black;
}
.outer {
display: inline-flex;
flex-flow: column wrap;
}
.child {
width: 0;
min-width: 100%;
max-width: 100%;
}
.img {
width: 100%;
}
<div class="outer">
<div>
<span>text</span>
<span>more text</span>
</div>
<div class="child">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" />
</div>
<div class="main">
<span contenteditable>this should determine width</span>
</div>
</div>
Another Solution
Use a background-image instead of an img. This allows us to make the image scale with the width of the widest element in the flexbox.
The trick is to set a padding-bottom on the element with the image proportional to the image proportions. In this case the image is square, so I'll set `padding-bottom: 100%; so it creates a square element.
If the image was a wide rectangle, 200 x 100 px, I would set padding-bottom: 50%. Or, if the image was a tall rectangle, 100 x 200 px, I would set padding-bottom: 200%.
Like this:
div {
border: 1px dotted black;
}
.outer {
display: inline-flex;
flex-flow: column wrap;
}
.img {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded);
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 100%;
}
<div class="outer">
<div>
<span>text</span>
<span>more text</span>
</div>
<div class="img">
</div>
<div>
<span contenteditable>this should determine width</span>
</div>
</div>
You can do this with CSS table layout and set width: 1% on table and white-space: nowrap on text elements.
.outer {
display: table;
width: 1%;
}
.outer span {
white-space: nowrap;
}
div {
border: 1px dotted black;
}
img {
max-width: 100%;
}
<div class="outer">
<div><span>text</span><span>more text</span></div>
<div class="image">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
</div>
<div><span>this should determine width</span></div>
</div>
As you asked about it for flexbox layout particularly, here is trick playing with pseudo and positions. Note, it only works if you know the image aspect ratio already, example below for a square image.
div {
border: 1px dotted black;
}
.outer {
display: inline-flex;
flex-flow: column;
}
.image {
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 100%;
/*https://stackoverflow.com/a/10441480/483779*/
}
.image img {
position: absolute;
left: 0;
top: 0;
max-width: 100%;
}
<div class="outer">
<div class="image">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
</div>
<div>this should determine width</div>
</div>
Your CSS container is already as wide as its widest sibling div. You just need to shrink the border of the picture with paint or photoshop.
I am testing this problem in the latest version of Safari for Windows 7.
The problem is that this code works in all other browsers BUT safari:
<style type="text/css">
.userImg { height: 100%; width: 100%; }
.imgContainer { height: auto; width: 150px; }
</style>
<div class="imgContainer">
<img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
</div>
Does anyone know of a trick to get this to size the image proportionally in Safari using just CSS?
Thanks!
For those who needs to use height auto and parent of image is set to display: flex, this trick will help.
image { align-self: flex-start; }
If your parent of image has set flex-direction: column, you need to do this instead.
image { justify-self: flex-start; }
Just set only the width on the image. The browser will scale the image proportionally automatically.
.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }
For those who needs to use height auto you an also try with this :
.userImg{
object-fit: contain;
}
.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }
2019 year.
check maybe the parent element
.imgContainer { display: flex; align-items: stretch}
Try this:
Parent has display:flex
Child has align-self:center
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Slabo 27px", serif;
}
h2 {
text-align: center;
}
[data-flex] {
display: flex;
width: 80%;
max-width: 800px;
font-size: 1.2rem;
margin: 0 auto;
line-height: 1.5;
}
[data-flex] > img {
margin-right: 2rem;
width: 30%;
}
[data-center] {
align-items: center;
}
[data-flex] div, [data-flex] p {
flex: 1;
}
[data-flex] div {
margin-right: 2rem;
}
[data-flex] div img {
width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
<img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
<img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
<img src="sophie.jpg" alt style="align-self: center">
</div>
<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
<img src="sophie.jpg" alt>
</div>
<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>
<div data-flex data-center>
<div>
<img src="sophie.jpg" alt>
</div>
</div>