Resize multiple images in aflex box

HTML-CSS
1

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

PNG
PNG1920×1080 395 KB

2

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
3

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

4 
type or paste code here

2nd honey class

 <div>

<section ><img  class="img1" src="https://tse1.mm.bing.net/th?id=OIP.MRrxokmsNz3yo6F6yo1SzwHaHa&pid=15.1&P=0&w=300&h=300"  >
  </section>
  </div>   
</div>

here is the css :
.container{
display:flex;
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; */
}

.img1{
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;
}

5

to center items within the flex container add these lines to the existing css
align-items:center;
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
6

thanks alot bro :blue_heart::blue_heart:

7

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

1 Like