This question already has answers here:
How do browsers calculate width when child depends on parent, and parent's depends on child's
(1 answer)
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
If I have a flexbox with a max-width: 500px, and inside I have 3 img elements, they extend beyond the max-width of the flexbox.
However, if I wrap all of those img elements in a div, they remain contained within the max-width of the flexbox.
I thought it might be due to the display property, but changing the img element to display: block also doesn't keep it contained.
Overflow of flexbox:
.flex-box {
display: flex;
justify-content: center;
align-items: center;
max-width: 500px;
margin: 0 auto;
}
img {
width: 100%;
max-width: 100%;
}
<div class="flex-box">
<img src="https://images.pexels.com/photos/1586154/pexels-photo-1586154.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
<img src="https://images.pexels.com/photos/1586154/pexels-photo-1586154.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
<img src="https://images.pexels.com/photos/1586154/pexels-photo-1586154.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>
Contained within flexbox:
.flex-box {
display: flex;
justify-content: center;
align-items: center;
max-width: 500px;
margin: 0 auto;
}
img {
width: 100%;
max-width: 100%;
}
<div class="flex-box">
<div>
<img src="https://images.pexels.com/photos/1586154/pexels-photo-1586154.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>
<div>
<img src="https://images.pexels.com/photos/1586154/pexels-photo-1586154.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>
<div>
<img src="https://images.pexels.com/photos/1586154/pexels-photo-1586154.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>
</div>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 days ago.
So I’ve tried centering a div, but only the children get effected.
What am I doing wrong?
Here’s my current code:
<div class="card">
<img src="images/image-equilibrium.jpg" alt="Image">
</div>
And my CSS:
.card {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: black;
}
Here’s what’s actually happening:
Use the flexbox on the parent, not on the div you want to center:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 200px;
height: 200px;
background-color: black;
}
<div class="parent">
<div class="card">
<img src="images/image-equilibrium.jpg" alt="">
</div>
</div>
If you want to keep the HTML structure (not inserting parent), you could just use the horizontal margin auto like this:
.card {
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
}
<div class="card">
<img src="images/image-equilibrium.jpg" alt="">
</div>
EDIT: OP wants to center it both vertically and horizontally.
If you want to do that, you need to modify the most top parent as well (the <body> tag) and make its height 100%, like this:
body {
height: 100vh;
margin: 0;
}
.parent {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 200px;
height: 200px;
background-color: black;
}
<div class="parent">
<div class="card">
<img src="images/image-equilibrium.jpg" alt="">
</div>
</div>
The properties justify-content and align-items were applied for the children of .card. If you want to center the .card you will have to set the display property to flex for the parent of .card. or if the .card has a fixed width which in your case it has, you can also set the margin-x:auto on the .card, by doing so it will be aligned at the center of it's parent container. Hope I was able to make you understand.
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed last year.
How can the height of the image be relative to the height of the elements on the left?
I'm trying to create the following layout:
What I tried
I'm trying to achieve this with flexbox. My html looks like this. I have display:flex on the container <div class="split">. That container houses two children containers: <div class="intro__primary"> and <div class="intro__secondary">. The first has an h1, p and a. The second the img.
I gave both children a width of 48%, and I want my image to occupy as much vertical space as possible, but not more than the height of <div class="intro__primary">.
HTML
<section class="intro">
<div class="split">
<div class="intro__primary">
<h1></h1>
<p></p>
<a class="btn"></a>
</div>
<div class="intro__secondary">
<img>
</div>
</div>
CSS
.split {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.intro__primary {
width: 48%;
align-self: flex-start;
}
.intro__secondary {
width: 48%;
height: 100%;
align-self: flex-end;
}
.intro__secondary > img {
max-width: 100%;
height: 100%;
}
The code above results in an image that has a way larger height than the container with the text on the left. I played a lot with all the properties but can't fix it. What am I overlooking?
.split {
max-height: 100px;
display: flex;
}
.intro__secondary {
max-height: 100%;
}
.intro__secondary img {
height: 100%;
width: 100%;
object-fit: cover; /* you can also use object-fit: contain; */
}
<section class="intro">
<div class="split">
<div class="intro__primary">
<h1>Heading</h1>
<p>paragraph</p>
<a class="btn"></a>
</div>
<div class="intro__secondary">
<img src="https://source.unsplash.com/random" alt="random-image">
</div>
</div>
</section>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I have a parent and it has icons with text that I distributed using display: flex, but now the problem is. How do I make a block with icons in the center of the parent? I tried different ways that I found on the Internet, but they don't work as I understand because of display: flex
.icons {
margin: auto 250px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
<div class="service">
<div class="icons">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
Your CSS value justify-content: space-between; was wrong for aligning it in center.
.icons {
margin: auto 250px;
display: flex;
flex-direction: row;
justify-content: center; /* you gave this wrong value */
align-items: center;
}
/* Demo */
img {
border: 1px solid #000;
}
.service {
border: 1px solid red;
}
<div class="service">
<div class="icons">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
So I am attempting to have 3 flex items with equal height and width inside a flex container. I am successful in making the 3 flex items have equal width. However, the first flex-item has a div (.images) that is also a flex container which contains a few more children than the other 2 flex items' (.images) div. This results in the height of the 1st flex-item to be larger than the other 2. How do I make the height of the other 2 flex items have the same height as the first, even though they do not have the same amount of children? I researched this issue, but I only found answers when the flex-direction property is set to column. In my case the flex-direction property is set to row within the flex container.
body {margin: 0}
.flex-container {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-items {
width: 33.333%;
height: 100%;
}
.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
justify-content: center;
}
<div class="flex-container">
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
<img src="image4.jpg" alt="">
<img src="image5.jpg" alt="">
</div>
</div>
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image6.jpg" alt="">
<img src="image7.jpg" alt="">
</div>
</div>
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image8.jpg" alt="">
<img src="image9.jpg" alt="">
</div>
</div>
</div>
You need to give the images inside .images a height of 100% and a width of auto - if you want them to scale proportionately, like so:
.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%; (images is getting 100% height, but nothing is telling its children to go up in height)
justify-content: center;
}
.images img { (address the children)
height:100%;
width:auto;
}
If you don't set images width and height they will use auto, and scale it from that for the flex box depending on what browser your on of course.
Images can be manipulated inline or using css by using the height or width property, an example of both is below.
Inline Example 1:
<img src="#.png" width="auto" height="100%" />
Css Example 2:
div.images > img {
height: 100%;
width: auto;
}
It is also good idea to optimize images for your web page and not to rely on auto scaling for the best results. After all you are the one that knows what the end result should be.
:)
I've had difficulty figuring out how to cleanly do precicely what I am asking in the title.
Say for example I have a something like this:
<div class="image-row">
<img src="image1">
<img src="image2">
<img src="image3">
<img src="image4">
<img src="image5">
</div>
I have seen answers to similar questions, but they don't deal with the issue of spreading mixed width elements across a responsive parent element.
In something like Photoshop, this is called "Distribute horizontal centers". Here is an example I made in photoshop (500px wide image-row):
here are the same boxes when image-row is stretched to 900px wide:
Note that the gaps between the images are not necessary even, the the spread is even based on the horizontal centers of the objects.
How can I accomplish this basic idea in css?
You may use text-align:justify and a pseudo for older browser or use the display:flex properties for latest browsers.
.image-row {
width: 500px;
border: solid;
margin: 1em auto;
}
img {
vertical-align: top;
}
.justify {
font-size: 0.01px;
text-align: justify;
}
.justify:after {
content: '';
display: inline-block;
width: 99%;
vertical-align: top;
height: 0;
}
.space-between {
display: flex;
justify-content: space-between
}
<div class="image-row justify">
<img src="http://lorempixel.com/120/50">
<img src="http://lorempixel.com/50/50">
<img src="http://lorempixel.com/80/50">
<img src="http://lorempixel.com/70/50">
<img src="http://lorempixel.com/30/50">
</div>
<div class="image-row space-between">
<img src="http://lorempixel.com/75/50">
<img src="http://lorempixel.com/30/50">
<img src="http://lorempixel.com/100/50">
<img src="http://lorempixel.com/50/50">
<img src="http://lorempixel.com/80/50">
</div>
Try this:
html
<div class="table">
<div class="image-row">
<div><img src="image1"></div>
<div><img src="image2"></div>
<div><img src="image3"></div>
<div><img src="image4"></div>
<div><img src="image5"></div>
</div>
</div>
css
.table{
display: table;
width: 100%;
}
.image_row {
diplay:table-row;
}
.image_row div {
display: table-cell;
text-align: center; /* if you want to be centered */
}
.image_row div img {
display:block;
max-width: 100%;
}
You can use a flex display and set justify-content to space-between. You can do that on your image-row class:
.image-row {
display: flex;
justify-content: space-between;
}
The point is to use this class on the container div.