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.