css - con - imagen de fondo en jumbotron

Bootstrap 3 imágenes receptivas una al lado de la otra altura

Question

¿Es posible usar 2 imágenes receptivas una al lado de la otra con Bootstrap 3 ? Por el momento, el col-sm-4 no tiene la misma altura.

<div class="container">
    <div class="row">                                     
        <div class="col-sm-4">                 
            <img class="img-responsive" src="http://placehold.it/400x400" />
        </div>                  
        <div class="col-sm-8">
            <img class="img-responsive" src="http://placehold.it/800x400" />
        </div>                  
    </div>
</div>

Demo Fiddle: http://jsfiddle.net/u9av6/3/

¡Gracias!

Answer 1

Aquí hay una versión funcional, con jsfiddle.net/MkP88 .

<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>                       
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>

Answer 2

Para hacer que las imágenes se muestren una al lado de la otra, debe hacer tres cosas:

Primero : haga que todas sus imágenes respondan en el archivo html de esta manera:

<div class="row">

      <div class="col-xs-3 left-image"  >

        <img  class="img-responsive" src="../img/fourthimg.jpg">
      </div>
      <div class="col-xs-9 right-image">

          <img class="img-responsive" src="../img/firstimg.jpg" >

     </div>

    </div>

Esto es para poner dos imágenes una al lado de la otra. Podrías tener tantas imágenes como sea posible.

2º: dentro de tu CSS, da la altura a estas imágenes como esta:

   .img-responsive {display:block; height: 600px; width: 100%;}

El ancho se establece en 100%, lo que significa que tanto (para este ejemplo) como todas las imágenes cubrirían el 100% del ancho de columna proporcionado en su código html.

3º (Más importante): CSS tiene esta propiedad para dejar márgenes / rellenos automáticamente a la derecha e izquierda cuando se coloca una imagen dentro de un div y este relleno está asociado con la imagen o cualquier otro elemento que desee colocar dentro de un div.

Para solucionar esto, vaya a su archivo css y para cada imagen, establezca el margen izquierdo y el margen derecho en 0px de la siguiente manera:

.right-image{
padding-left:0px;
padding-right:0px;

}


.left-image{

 padding-right: 0px;
 padding-left: 0px;


}

¡Este es un ejemplo de trabajo y una explicación de cómo poner las imágenes una al lado de la otra usando bootstrap!

Answer 3

Tal vez su problema es que en su código, el relleno no está considerando.

Tus 400px y 800px son agradables, pero con relleno, considerando que no es bueno.

En este violín: http://jsfiddle.net/Lrc5t/1/ , sin relleno, mantienen la misma altura. Pero no es bueno sin relleno ...

El relleno en cada .row es de 15px izquierda y a la derecha.

html:

<div class="row">                   
    <div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>                       
    <div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>              
</div>

css:

.nopadding{
    padding-left: 0px !important;
    padding-right:0px !important;    
}

ACTUALIZAR:

violín : http://jsfiddle.net/Lrc5t/2/

Sin paddding no es bueno, simplemente inverso para añadir relleno a la imagen derecha:

<div class="row">

<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>

<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>

</div>

.nopadding-two{
    padding-right:45px !important;
}

pd : puedes elegir agregar tu relleno a la izquierda o a la derecha ... para mantener el relleno en el medio. Y ... nopadding-one y text-right class son para borrar ... (se me olvidó) ...

ACTUALIZAR DESPUÉS DEL COMENTARIO: * ¿Por qué 45px? * La imagen 1 es flotante: izquierda, por lo que solo tiene el relleno a la derecha en 15px La imagen 2 tiene relleno a la izquierda y derecha a 15px {= 30px} Por lo tanto, para hacer la igualdad (para obtener las mismas restricciones) necesitas transmitir el relleno total a la imagen 2

Answer 4

Verifique este código Este código buscará la altura más pequeña de la imagen y la establecerá como la altura máxima de las otras imágenes. El resto de la imagen estará oculta. Echale un vistazo.

<script>
   setTimeout(function () {
      equalheight(''.portfolio-item'');
   }, 3000);
   function equalheight($that) {
      $minHeight = 0;
      $($that).each(function (index) {
         $thisHeight = $(this).children(''.portfolio-link'').innerHeight();
         if ($minHeight == 0) {
            $minHeight = $thisHeight;
         } else {
            if ($minHeight > $thisHeight) {
               $minHeight = $thisHeight;
            }
         }
      });
      $($that).children(''.portfolio-link'').css(''max-height'', $minHeight);
      $($that).children(''.portfolio-link'').css(''overflow'', ''hidden'');
   }
</script>

Mi html es

                <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-01.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Round Icons</h4>
                     <p class="text-muted">Graphic Design</p>
                  </div>
               </div>
               <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-02.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Startup Framework</h4>
                     <p class="text-muted">Website Design</p>
                  </div>
               </div>

Answer 5

aquí está mi solución con un envoltorio simple. La idea es tratar con la relación de aspecto :

jsfiddle demo

Answer 6

prueba esto:

<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>

<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>

Answer 7

si quieres altura constante, deberías agregar estas propiedades:

height: 200x ;   # any constant height
object-fit: cover;

Si no quieres que el ancho sea constante, debes agregar estas propiedades:

width: 200px ;  # any constant height
object-fit: cover;

object-fit: cover, solucionó el problema de estirar la imagen en mi caso.