slider responsive

[siklerni]

Buenas tardes,

Estoy teniendo algunos problemas con el slider de mi index (www.sportsclap.com) ya que no consigo que la altura de las fotos se adapte a dispositivos móviles. A priori mi plantilla es fully responsive y no debería dar problemas pero no sé la razón de que se muestre de esta manera.

Los div de las imágenes tienen una altura por defecto (height 340 y 170) que al hacer cualquier cambio consigo que no se desproporcione la imagen pero si su tamaño.

¿Alguien podría ayudarme? Muchas gracias.

Saludos

[catucux]

El problema que veo es que tu slider tiene un height ya definido.

Código HTML:

<img width="520" height="350" src="http://www.sportsclap.com/wp-content/uploads/2015/03/1010572_heroa-520x350.jpg" class="img-responsive wp-post-image" alt="Foto: GOAL.com">
 

Esta configuración deberia estar configurada por tu modulo de WP en donde le asignas un height por default, debes dejar el valor en auto o borrar la propiedad, de esta manera se ajustara al 100% del width y se veran bien.

Saludos.

[siklerni]

Buenas tardes,

Gracias por tu respuesta catucux. Te refieres al módulo WP a la configuración que viene en el shortcode de ese slider. ¿Es ahí donde he de modificar la altura? Gracias.

Saludos

[NueveReinas]

Creo que también tiene que ver con la altura del slider...

De todas formas, te recomiendo que le agregues esta clase a los contenedores de las imágenes:

Código:

.imagen {
	max-width:100% !important;
	height:auto !important;
}

Por ejemplo:

Código:

<div class"clase1 clase2 imagen">
<!-- Acá la imagen --->
</div>

[pzin]

El valor por defecto de cualquier elemento para la altura es auto. Es redundante especificarlo. Aunque la mala praxis del !important es peor.

[NueveReinas]

Iniciado por pzin

El valor por defecto de cualquier elemento para la altura es auto. Es redundante especificarlo. Aunque la mala praxis del !important es peor.

No había tenido en cuenta que el auto es así por defecto para la altura... Pero tampoco está de más añadirlo, ¿no? :P
O sea, tampoco es que le añada más peso al archivo...

P.S.: ¿Algún manual/consejo para los !important? Grazzie.

[pzin]

Iniciado por NueveReinas

No había tenido en cuenta que el auto es así por defecto para la altura... Pero tampoco está de más añadirlo, ¿no? :P
O sea, tampoco es que le añada más peso al archivo...

Imagínate esto así:

Código CSS:

div {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 100%;
  color: #000;
}
 

No tiene mucho sentido.

Iniciado por NueveReinas

P.S.: ¿Algún manual/consejo para los !important? Grazzie.

Sentido común. Si tienes un código ordenado y conoces sobre la especificidad CSS, es muy extraño que te encuentres en una situación donde debas usarlo.

[siklerni]

Buenas,

Gracias por vuestras respuestas. Aún no me ha quedado claro qué he de hacer para que se visualicen las fotos del slider de manera proporcionada en la versión móvil.

Si quito el height la foto respeta la proporción pero no me coge el alto del div contenedor. ¿Cómo podría solucionarlo? Gracias.

Saludos

[NueveReinas]

Iniciado por siklerni

Buenas,

Gracias por vuestras respuestas. Aún no me ha quedado claro qué he de hacer para que se visualicen las fotos del slider de manera proporcionada en la versión móvil.

Si quito el height la foto respeta la proporción pero no me coge el alto del div contenedor. ¿Cómo podría solucionarlo? Gracias.

Saludos

Prueba estableciendo un "max-height"