¿Cómo me deshago de los espacios en blanco en la imagen en miniatura de jQuery Mobile Listview?

Cuando aplico una imagen a un elemento de lista de vista de lista, la miniatura debe cambiar su tamaño a 80x80px. Cambia el tamaño a 80 de ancho pero no a 80 de alto y debido a esto hay un espacio debajo de la imagen. También todo el elemento de la lista se ve compensado debido a esto, el texto está demasiado alto en el elemento de la lista.

enter image description here

Soy consciente de que si tuviera un montón de texto en el elemento de la lista y estableciera el espacio en blanco como normal, esto provocaría este problema, pero no creo que eso se aplique a mí en este caso, ya que no tengo suficiente texto.

Aquí está el código I copiado de las escuelas w3, su ejemplo de lo que estoy tratando de hacer ( http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_thumbs2 ). Lo he modificado para agregar mis imágenes y un elemento de lista normal.

         

List With Thumbnails and Text

Sé que puedo aplicar una clase a las imágenes y en la altura del conjunto de clases: 80 px; Eso funciona, pero la imagen parece un poco estirada.

¿Alguna idea de por qué no funciona para mí como lo hace en los ejemplos de w3?

Para corregir la altura de los elementos de la lista, debe Anular algunos de los css predeterminados.

Sin embargo, la solución sobre @jqmtricks mantiene la relación de aspecto al escalar la miniatura para encajar en el centro del cuadro predeterminado de 80×80, de modo que obtendrá un espacio sin importar qué, y eso es lo mejor con todo tipo de tamaños de miniaturas, si tiene alguna.

Si desea que la miniatura sea de 80×80, independientemente de si el alto y el ancho de la imagen no son iguales

CSS

 .ui-listview .ui-li-has-thumb>.ui-btn>img { max-width:80px !important; width: 80px; height: 80px; } 

Manifestación

https://jsfiddle.net/bwfnpz0q/

Resultado

enter image description here

Si desea mantener la relación de aspecto y corregir la altura general de los elementos de la lista

CSS

 .ui-li-has-thumb { // any list item that has a thumbnail height:63px; } .ui-li-has-thumb .ui-btn-icon-right:after { // the arrow postion margin-top:-18px; } .ui-listview .ui-li-has-thumb>.ui-btn>img { //the thumnail size max-width:100px !important; width: 100px; height: 60px; } 

Manifestación

https://jsfiddle.net/cfvj992m/

Resultado

enter image description here

Si el último elemento de la lista tiene una miniatura, se necesita Css adicional porque se personaliza con relleno

CSS

  .ui-li-has-thumb, .ui-listview>li.ui-last-child>a.ui-btn { // as bove with also the last list item height:63px; } .ui-last-child .ui-btn-icon-right:after { // last list items arrow margin-top:-11px !important; } .ui-li-has-thumb .ui-btn-icon-right:after { margin-top:-18px; } .ui-listview .ui-li-has-thumb>.ui-btn>img { max-width:100px !important; width: 100px; height: 60px; } ul li:last-child a { // last list items removing padding from top and bottom padding-bottom: 0px; padding-top:0px; } 

Manifestación

https://jsfiddle.net/dfe14jpy/

Resultado

enter image description here