3

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <img src="https://loremflickr.com/320/240" />
      </div>

      <div class="col">
        <div class="col mb-4">
          <img src="https://loremflickr.com/320/240" />
        </div>

        <div class="col">
          <img src="https://loremflickr.com/320/240" />
        </div>
      </div>

    </div>
  </div>



</body>

</html>

Quiero que se dispongan en la misma fila, una foto a la izquierda y dos fotos a la derecha una encima de otra.Como en esta imagen.

introducir la descripción de la imagen aquí

1 respuesta 1

2

Puede setear la primera imagen para que ocupe todo el ancho del contenedor con la clase w-100 ya que actualmente posee las dimensiones 320*240, y el alto con la clase h-100.

Aunque sería mejor tener una imagen con mayor resolución y con un tamaño acorde a lo que desea.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container-fluid">
	<div class="row" >
		<div class="col">
		<img src="https://loremflickr.com/320/240" class="w-100 h-100" />
		</div>

		<div class="col">
		<div class="col mb-4">
			<img src="https://loremflickr.com/320/240"  />
		</div>

		<div class="col">
			<img src="https://loremflickr.com/320/240" />
		</div>
		</div>
	</div>
</div>

1
  • He puesto esas imágenes para que se vea algo, si le pongo todo el ancho y el alto deja de ser responsive, la idea es que se vaya redimensionando todo manteniendo la misma altura.
    – Tiberius
    el 11 feb. 2019 a las 23:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.