Tengo varias imágenes en un contenedor y me gustaría que encajen en un contenedor, pero el problema es que no puedo cambiar el ancho y la altura, ya que actualmente estoy creando una aplicación que lo hace dinámico.

Como puede ver, puse un borde rojo para el contenedor, falta el borde derecho.

Esto es lo que conseguí:

.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>

¿Cómo puedo hacer que estas imágenes encajen dentro del borde rojo?

0
Alan S 17 oct. 2019 a las 15:53

5 respuestas

La mejor respuesta

Puedes probar esto con la propiedad flex: 1 CSS.

.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>
2
Roy 17 oct. 2019 a las 13:31

Puedes usar este código

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>
0
Piyush Teraiya 17 oct. 2019 a las 13:05

Así es como recomendaría hacer esto, puede mantener todas las imágenes en una línea, responde y se calcula:

.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>

Si desea que sigan escalando y no respondan, elimine el CSS receptivo.

1
halfer 13 feb. 2020 a las 21:30

Puedes usar de esta manera.

.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>
0
Nims Patel 17 oct. 2019 a las 13:05

Deberías agregar así

.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>
0
Julian S 17 oct. 2019 a las 14:50