4

Tengo este segmento de cógido:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <img alt="Silverfox" src="https://i.ytimg.com/vi/nnobENl6T9s/maxresdefault.jpg">
    </div>
    <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12">
      <figure>
        <img class="rounded d-block m-l-none" alt="Slogan" src="http://2.bp.blogspot.com/-OBtYSBUYCo0/UN91p2iVt4I/AAAAAAAAg6U/DQnE0LOH_bU/s640/silver+fox+5.jpg">
        <figcaption class="text-left">Self-Service Portal solution</figcaption>
      </figure>
      <h4 class="title4-long-responsive-section izq blue font-bold text-uppercase"> Aquí debe ir el slogan promocional del producto</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      <button class="btn btn-blue">Read more</button>
    </div>
  </div>
</section>

Donde el tamaño de la imagen Silverfox es mayor que el div que la contiene y no logro que mantenga el mismo tamaño y no tape los elementos de la 2da columna

5
  • Agrega la clase img-fluid a tu imagen
    – user22721
    el 20 mar. 2018 a las 16:19
  • Es que si adiciono esa clase la imagen se me pone muy pequeña respecto a lo que contiene la 2da columna. El div que la contiene tiene un width:500px y quiero que la imagen tenga ese ancho pero la altura establecida por el row el 20 mar. 2018 a las 16:38
  • ¿Quieres que la imagen ocupe todo el div de la derecha? ¿Tu div tiene un ancho fijo de 500px todo el tiempo?
    – user22721
    el 20 mar. 2018 a las 16:41
  • Si justamente asi el 20 mar. 2018 a las 17:09
  • Edité mi respuesta, según lo que me dijiste
    – user22721
    el 20 mar. 2018 a las 17:17

1 respuesta 1

6

Para que las imagenes sean responsivas con Bootstrap 4 tienes que agregar la clase img-fluid a tus imágenes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <img alt="Silverfox" class="img-fluid" src="https://lorempixel.com/800/600/nature?1234">
    </div>
    <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12">
      <figure>
        <img class="img-fluid rounded d-block m-l-none" alt="Slogan" src="https://lorempixel.com/800/600/nature?5678">
        <figcaption class="text-left">Self-Service Portal solution</figcaption>
      </figure>
      <h4 class="title4-long-responsive-section izq blue font-bold text-uppercase"> Aquí debe ir el slogan promocional del producto</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      <button class="btn btn-blue">Read more</button>
    </div>
  </div>
</section>


Edición

Para que la imágen ocupe todo el div deseado puedes ponerla como imagen de fondo, es importante asignarle una altura mínima para que no se pierda cuando ocupe todo el ancho de la pantalla

#silverfox {
  /* Asignamos una altura mínima */
  min-height: 400px;
  
  background-image: url('https://lorempixel.com/800/600/nature?1234');
  background-size: cover;
  background-position: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <div class="row">
    <div id="silverfox" class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
    <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12">
      <figure>
        <img class="img-fluid rounded d-block m-l-none" alt="Slogan" src="https://lorempixel.com/800/600/nature?5678">
        <figcaption class="text-left">Self-Service Portal solution</figcaption>
      </figure>
      <h4 class="title4-long-responsive-section izq blue font-bold text-uppercase"> Aquí debe ir el slogan promocional del producto</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      <button class="btn btn-blue">Read more</button>
    </div>
  </div>
</section>

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.