javascript - w3schools - Escala diferentes imágenes de ancho para adaptarse a una fila y mantener la misma altura

tag code html w3schools

Question

Tengo tres imágenes que son todas anchuras diferentes , pero cada una de la misma altura .

Quiero que estas imágenes estén en una fila receptiva para que el ancho combinado de estas tres imágenes sea el 100% del ancho de la pantalla, todas las imágenes tengan la misma altura, cada imagen mantenga su relación de aspecto y las imágenes no se recorten.

Una forma de hacerlo sería establecer un ancho de porcentaje diferente para cada imagen en CSS, en función del ancho de cada imagen de acuerdo con los demás. Pero tengo curiosidad acerca de una forma más inteligente, probablemente usando JavaScript / jQuery, que sería más eficiente para hacer este tipo de cosas a gran escala.

Answer 1

Es posible que desee utilizar esto como una base para refinar una solución:

https://jsfiddle.net/kb4gg35f/

Por alguna razón, esto no funciona como un fragmento. Sin embargo, funciona como un violín.

var images = $(''img'');
var accumulatedWidth = 0;
var widthResizeFactor;
var screenWidth = $(''div'').width();
var originalSizeArray = [];
$(document).ready(function() {
  for (var i = 0; i < images.length; i++) {
    var theImage = new Image();
    theImage.src = images[i].src;
    accumulatedWidth += theImage.width;
    originalSizeArray.push(theImage.width);
  }
  widthResizeFactor = screenWidth / accumulatedWidth;
  for (var i = 0; i < images.length; i++) {
    images[i].width = originalSizeArray[i] * widthResizeFactor;
  }
});

body {
  margin: 0;
}
div:after {
  content: "";
  display: table;
  clear: left;
}
img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <img src="http://lorempixel.com/100/200" />
  <img src="http://lorempixel.com/200/200" />
  <img src="http://lorempixel.com/400/200" />
</div>

Answer 2

Esto podría funcionar, utilizando el diseño de la tabla css.

jsFiddle

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
li {
  display: table-cell;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

<ul>
  <li><img src="//dummyimage.com/100x100/aaa" /></li>
  <li><img src="//dummyimage.com/200x100/bbb" /></li>
  <li><img src="//dummyimage.com/300x100/ccc" /></li>
</ul>

Answer 3

La esencia del enfoque que tomaría es averiguar cuán grande es tu marco, y averiguar qué tan ancha es la suma de tus imgs. Luego, usando una proporción de esos totales, cambie el tamaño de cada una de las imágenes.

$(document).ready(function(){
var frameWidth = $("div.imgs").width()
var totalImgWidths = $("img#img1").width() + $("img#img2").width() + $("img#img3").width()
var ratio = frameWidth / totalImgWidths
var fudge = .95

$("img#img1").width(Math.floor($("img#img1").width() * ratio * fudge) )
$("img#img2").width(Math.floor($("img#img2").width() * ratio * fudge) )
$("img#img3").width(Math.floor($("img#img3").width() * ratio * fudge) )
})

Ver un rápido plunker que escribí rápidamente. No es lujoso, y está utilizando un poco de un factor de caramelo, así que estoy feliz de que alguien pueda mejorarlo.

Answer 4

Mi primer acercamiento a esto sería crear tres divs dentro de un contenedor div. Asigne una altura y un ancho de 33.33% a cada uno de los tres (y un flotador: izquierda;) y 100% de ancho al contenedor. Luego configure sus tres imágenes para que sean el fondo de esos tres divs con las propiedades de fondo correctas, tales como

background-size:cover;

Podría cortar partes de tus imágenes dependiendo del ancho de la pantalla, pero no creo que puedas evitar eso con imágenes que no sean del mismo tamaño.

HTML

<div class="container">
   <div class="image" style="background-image: url(''/image.jpg'');">
   </div>
   <div class="image" style="background-image: url(''/image.jpg'');">
   </div>
   <div class="image" style="background-image: url(''/image.jpg'');">
   </div>
</div>

CSS

.container{
   width:100%;
}
.image{
   float:left;
   width:33.33%;
   background-size:cover;
   background-repeat: no-repeat;
}

Answer 5

Si las imágenes de origen varían en altura, tendrá que usar JavaScript. Establezca todas las imágenes a una altura común arbitraria y encuentre su ancho combinado a esa altura. A continuación, aumente la altura multiplicando la diferencia del ancho del objetivo y el ancho combinado (como un porcentaje):

$(window).on("load resize", function () { // wait for the images to complete loading
  $(".imgRow").each(function () {
    var row = $(this);
    var imgs = row.find("img");
    imgs.height(1000);
    var combinedWidth = imgs.get().reduce(function(sum, img) {
        return sum + img.clientWidth;
    }, 0);
    var diff = row.width() / combinedWidth;
    imgs.height(999 * diff); // 999 allows 1 px of wiggle room, in case it''s too wide
  });
});

.imgRow {
  clear: left;
}
.imgRow img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgRow">
  <img src="http://placecage.com/100/300" />
  <img src="http://placecage.com/300/300" />
  <img src="http://placecage.com/500/300" />
</div>
<div class="imgRow">
  <img src="http://fillmurray.com/600/300" />
  <img src="http://fillmurray.com/200/300" />
  <img src="http://fillmurray.com/400/300" />
</div>
<div class="imgRow">
  <img src="http://nicenicejpg.com/500/300" />
  <img src="http://nicenicejpg.com/100/300" />
  <img src="http://nicenicejpg.com/300/300" />
</div>
<div class="imgRow">
  <img src="http://placesheen.com/400/300" />
  <img src="http://placesheen.com/600/300" />
  <img src="http://placesheen.com/250/300" />
</div>

Answer 6

Twitter Bootstrap (o cualquier marco decente de CSS) tiene una clase de CSS especial predefinida que lo haga.

Ver el documento: http://getbootstrap.com/css/#grid