HTML5 CSS Responsive
Publicado por Buma (1 intervención) el 18/08/2015 09:36:00
Hola,
Estoy intentando de hacer una página web HTML con imágenes carrusel de desplazamiento horizontal con altura fija. La suma de la anchura de las imágenes es más del ancho de la pantalla, por lo que siempre aparece el control de "barra de desplazamiento". (En el ejemplo proporcionado 600px de altura, "número 20" de la imagen)
Al final de este grupo de imágenes, deseo tener un grupo responsive de imágenes con ancho y altura fijas (en el ejemplo proporcionado 100px x 100px, "pequeño número 2" en la imagen)
Ver Imagen Ejemplo:
http://i.stack.imgur.com/KNenB.png
MaxWidthValue es el límite de ancho para todas las imágenes, despues de este limite aparece una nueva fila para el "pequeño número 2" de imágenes.
Intenté varias posibilidades, nuevo div dentro del "content" div, traté de cambiar algunos atributos de etiquetas ul / li / div / img al "pequeño número 2" de las imágenes, etc... pero no me funciono.
Así que os proporciono, sólo el código de "unas imágenes carrusel de desplazamiento horizontal con altura fija".
CSS
HTML
Código Fiddle
https://jsfiddle.net/fqqbhuok/1/
Espero vuestra ayuda, entiendo que puede ser una petición poco frecuente, pero lo necesito,
Espero haberme explicado,
Gracias de antemano,
Buma,
Estoy intentando de hacer una página web HTML con imágenes carrusel de desplazamiento horizontal con altura fija. La suma de la anchura de las imágenes es más del ancho de la pantalla, por lo que siempre aparece el control de "barra de desplazamiento". (En el ejemplo proporcionado 600px de altura, "número 20" de la imagen)
Al final de este grupo de imágenes, deseo tener un grupo responsive de imágenes con ancho y altura fijas (en el ejemplo proporcionado 100px x 100px, "pequeño número 2" en la imagen)
Ver Imagen Ejemplo:
http://i.stack.imgur.com/KNenB.png
MaxWidthValue es el límite de ancho para todas las imágenes, despues de este limite aparece una nueva fila para el "pequeño número 2" de imágenes.
Intenté varias posibilidades, nuevo div dentro del "content" div, traté de cambiar algunos atributos de etiquetas ul / li / div / img al "pequeño número 2" de las imágenes, etc... pero no me funciono.
Así que os proporciono, sólo el código de "unas imágenes carrusel de desplazamiento horizontal con altura fija".
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#content {
top: 10%;
padding-left: 0px;
position: fixed; overflow:auto;height: 90%;
width: 100%;
}#content ul {
white-space:nowrap; list-style: none;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}#content li {
display: inline; padding: 0px 25px 0px 0px;}#content ul li img {
max-height: 600px;
}HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
<ul>
<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
</ul>
</div>
Código Fiddle
https://jsfiddle.net/fqqbhuok/1/
Espero vuestra ayuda, entiendo que puede ser una petición poco frecuente, pero lo necesito,
Espero haberme explicado,
Gracias de antemano,
Buma,
Valora esta pregunta
0
