Hoy necesitaba unas imágenes de un tamaño determinado y al final he creado un sitio web que especificando el alto y el ancho nos devuelve un png de ese tamaño.
http://www.josejavierfm.es/imagesize
La imagen es negra y tiene como texto el tamaño de la imagen:
Si queremos que al pulsar en un elemento se comporte de manera distinta si tiene la tacla mayusculas pulsada lo podemos conseguir con Javascript:
Si quieres que se comporte distinto manten pulsado "Mayusculas"
Ejemplo funcinando https://jsfiddle.net/Lu252r5z/
Tenemos una tabla formada por varias imágenes, queremos que las imágenes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tamaño no queremos que se reduzcan mas,sino que salten de linea:
La tabla podría ser:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Tal y como está sin css el resultado seria:
Ahora añadimos el css para hacerlo responsive:
#opcionesinicio{
width:100%
}
.img-responsive {
max-width: 100%;
width: auto;
}
Y el resultado es:
Pero si la pantalla es muy pequeña las imagenes apenas se ven.
Aqui es donde añadimos el codigo para que a partir de un tamaño la tabla se rompa
@media screen and (max-width:500px){
#opcionesinicio td{
float:left;
}
}
El resultado completo se puede ver en: