javascript - saber - relacion de aspecto 1:1

¿Cómo mantengo la relación de aspecto de las imágenes una al lado de la otra, mantengo las imágenes con la misma altura Y tengo un relleno fijo entre las imágenes?

Question

Actualmente estoy usando la respuesta de diseño de tabla aceptada de esta pregunta: Escale diferentes imágenes de ancho para que quepan en una fila y mantengan la misma altura para colocar dos imágenes una al lado de la otra, mantenga sus relaciones de aspecto y manténgalas a la misma altura al escalar. También me gustaría que haya un margen izquierdo de 8px en cada imagen. Me gustaría que el relleno permanezca 8px sin importar qué tan ancha sea la tabla / ul.

Aquí está el jsfiddle en el que estoy trabajando: https://jsfiddle.net/maryjames0/u1o5Lkmf/

Aquí está el HTML:

<ul>
<li><img src="http://walops.com/wp-content/uploads/Puppy-Awesome-Wallpaper-100x100.jpg" /></li>
<li><img src="http://photos.the-scientist.com/legacyArticleImages/2011/08/panda-200x100.jpg" /></li>
</ul>

Y el CSS:

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;
}

Hasta ahora, he intentado lo siguiente sin éxito:

• agregando un relleno a la izquierda de 8px a las imágenes
• agregando un relleno a la izquierda de 8px a los elementos de la lista
• agregando un margen izquierdo de 8px a las imágenes
• agregando un margen izquierdo de 8px a los elementos de la lista
• agregando un borde izquierdo blanco de 8px a las imágenes
• agregar elementos de lista adicionales que contengan tramos de "marcador de posición" con ancho establecido en 8px

Idealmente, me gustaría resolver esto con CSS, pero estoy dispuesto a aceptar las soluciones javascript / jQuery si esa es la única forma de hacerlo.

Gracias por cualquier idea y ayuda!

Answer 1

Creo que encontré una solución. Puede cortar un par de píxeles en la parte superior de la imagen, pero creo que es imperceptible para estar bien.

Ver jsfiddle: https://jsfiddle.net/kfsfu9bx/

Agrega esto:

li {
  overflow: hidden;
}

img {
  float: right;
  margin-top: -4px;
  width: calc(100% - 8px);
}

Answer 2

El truco consiste en mantener fija una dimensión (en este caso, la altura) y mantener la otra en automático (en este caso, el ancho). El navegador hará todo por ti. Para los elementos de la lista, flote o display:inline-block para que se sienten uno al lado del otro. https://jsfiddle.net/u1o5Lkmf/5/

Es posible que necesite algo de JavaScript para encontrar la imagen más pequeña y ajustar las imágenes más grandes en lugar de una altura fija codificada.