Resize multiple images in aflex box

iwant the 3 image to be the same size and the same coordinate &also not to exceed the div border (black line)nor the main border(red line) …iuse flex display for the three boxes

One issue you are going to have is that you have two images that have a landscape orientation while the third image is portrait. which division did you apply flex to?
Better yet give the link to your pen that way we can examine your code

1 Like

You’ve tried the following, right?

.thingholdingtheimage {
  position: relative;
.imageinflexbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

I may have messed something up there, not sure though because I’m sleepy xd

type or paste code here

2nd honey class


<section ><img  class="img1" src=""  >

here is the css :
height: 500px;
border: 1px solid red;
margin : 20px;
flex-wrap: ;
/* flex-direction: column; */


.container div{
background-color: #f1f1f1;
width: 33%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
text-decoration: None;
border: 1px solid;
/* display: table; */

@media(max-width: 800px;) {

/* flex-wrap: wrap;
flex-direction: column; */

width: 80%;
height: 50%;
margin: 3px;
max-width: 100%;

/itried this to keep the photo in the container but it didn’t work/

.container div::after {
content: “”;
clear: both;
display: table;

to center items within the flex container add these lines to the existing css
justify-items: center;
alignment refers to vertical placement while justification refers to horizontal.
read up on this article it is a great reference:

1 Like

thanks alot bro :blue_heart::blue_heart:

No, problem. Glad I could help. They also have an awesome article on css grid layout.

1 Like