How can I make multiple images fit in a container? - html

Question

I have multiple images in a container and would like them to fit into one container but the problmem is that I can't change the width and the height as I'm currently making an app that makes it dynamic.
As you can see I put a red border for the container, the right border is missing.
This is what I got:
.container {
display: flex;
width: 450px;
height: 300px;
border: 2px solid red;
}
.container img {
max-width: 100%
}
<div class="container">
<img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
<img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>
How can I make these images fit inside the red border?

Answer 1

You can try this with flex: 1 CSS property.
.container {
display: flex;
width: 450px;
height: 300px;
border: 2px solid red;
}
.container div {
flex: 1;
}
.container img {
max-width:100%;
}
<div class="container">
<div>
<img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
</div>
<div>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"> </div>
<div>
<img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>
</div>

Answer 2

Here is how I would recommend doing this, you can keep all the images in one line, it's responsive, and calculated:
.section {
width: 100%;
margin: 0 auto;
}
.section .section-inner {
width: 100%;
max-width: 1248px;
margin: 0 auto; /* centers container */
padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row; /* sort into rows */
align-items: center;
justify-content: space-between;
text-align: center;
background-color: rgba(255,100,100,0.25);
}
.section .section-inner div {
width: calc((100% / 4) - 20px); /* calculate width for maximum accuracy | minus margin */
padding-top: calc((100% / 4) - 20px); /* calculate width for maximum accuracy | minus margin */
margin: 10px; /* space between boxes */
background-size: cover;
background-position: center;
}
#media screen and (min-width: 640px) and (max-width: 1023px) {
.section .section-inner div {
width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
padding-top: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
}
}
#media screen and (max-width: 639px) {
.section .section-inner div {
width: 100%; /* calculate width for maximum accuracy | minus margin */
padding-top: 100%; /* calculate width for maximum accuracy | minus margin */
}
}
.image-one {
background-image: url(https://www.fairtrade.org.uk/~/media/FairtradeUK/Media%20Centre/Flowers.jpg?h=397&la=en&mw=760&w=760);
}
.image-two {
background-image: url(https://www.floraqueen.com/blog/wp-content/uploads/2017/11/Untitled-design-3-1.jpg);
}
.image-three {
background-image: url(https://www.elimaysflowers.co.uk/assets/uploads/elimays1.jpg);
}
.image-four {
background-image: url(https://cdn.mos.cms.futurecdn.net/AsaMYX4F9WRNVTLsARRAsR-1920-80.jpg);
}
<section class="section">
<div class="section-inner">
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
<div class="image-four"></div>
</div>
</section>
If you want them to keep scaling and not go responsive, remove the responsive CSS.

Answer 3

You can use this code
body {
margin: 0;
}
.container {
display: flex;
width: 450px;
height: 300px;
border: 2px solid red;
padding: 0px;
}
.container img {
max-width: 100%;
float: left;
width: 33.3%;
}
<div class="container">
<img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
<img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>

Answer 4

You can use this way.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 1170px;
border: 1px solid red;
}
<div class="container">
<img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg" width="304" height="236">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="304" height="236">
<img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG" width="304" height="236">
</div>

Answer 5

You should add like this
.container {
display: flex;
width: 450px;
height: 300px;
border: 2px solid red;
}
.container div{
width:33.33%;
}
.container img {
max-width: 100%
}
<div class="container">
<div>
<img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
</div>
<div>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
</div>
<div>
<img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>
</div>