elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: ¿Usas Skype? Protégete de los Skype Resolver


+  Foro de elhacker.net
|-+  Foros Generales
| |-+  Sugerencias y dudas sobre el Foro (Moderador: el-brujo)
| | |-+  Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento  (Leído 1,314 veces)
BloodSharp


Desconectado Desconectado

Mensajes: 500


Crianosfera 4 in comming!!!


Ver Perfil
Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« en: 25 Abril 2020, 00:04 »

Estoy actualizando mi avatar con After Effects y tengo una duda:

¿Cuál es la mayor resolución posible sin que se muestren las barras de desplazamiento en los publicaciones del foro?

Como puede verse aquí calculé una resolución de 190x300 píxeles pero aún así, se muestran las barra de desplazamiento horizontal... Quiero si alguien del foro pueda decirme la resolución más alta sin barras de desplazamiento:



B#


En línea



rub'n


Conectado Conectado

Mensajes: 1.038


(e -> λ("live now")); tatuar -> λ("α");


Ver Perfil WWW
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #1 en: 25 Abril 2020, 01:13 »

Estoy actualizando mi avatar con After Effects y tengo una duda:

¿Cuál es la mayor resolución posible sin que se muestren las barras de desplazamiento en los publicaciones del foro?

Como puede verse aquí calculé una resolución de 190x300 píxeles pero aún así, se muestran las barra de desplazamiento horizontal... Quiero si alguien del foro pueda decirme la resolución más alta sin barras de desplazamiento:



B#

que hay Sangre# , yo veo tu nick perfecto, no se si lo actualizaste?, o sea, lo veo sin barra horizontal. mi pantalla es 1920*1080


« Última modificación: 25 Abril 2020, 01:15 por rub'n » En línea

KNOWLEDGE  SHOULD BE FREE!!! blog.make();
If you don't have time to read, you don't have the time (or the tools) to write, Simple as that. Stephen King.
BloodSharp


Desconectado Desconectado

Mensajes: 500


Crianosfera 4 in comming!!!


Ver Perfil
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #2 en: 25 Abril 2020, 02:54 »

que hay Sangre# , yo veo tu nick perfecto, no se si lo actualizaste?, o sea, lo veo sin barra horizontal. mi pantalla es 1920*1080

Supongo que es la resolución de la pantalla (1366x768 está en mi vieja laptop), al menos a esa resolución tuya se ve mejor...


B#
« Última modificación: 25 Abril 2020, 02:57 por BloodSharp » En línea



EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.094


Ver Perfil
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #3 en: 25 Abril 2020, 03:06 »

Saludos,

- El foro es bastante clásico, jeje veo que utiliza puras tablas y además la imagen o avatar no tiene estilos tipo width: 100%

- Hay que considerar la resolución de pantalla, por ejemplo 1920x1080 y luego como se interpretan estos pixeles por el navegador en este caso. Mi Chrome lo tengo configurado para que me muestre todo a un Zoom predeterminado de 125% porque mi pantalla de de 15.5 pulgadas y se vería todo muy pequeñito XD.

-- Ahora bien, como yo tengo un zoom de 125% esto implica tener una "resolución virtual" de 1920/1.25 => 1536 y 1080/1.25 => 864, que es lo mismo que 1536x864, ese 1.25 se le llama DevicePixelRatio, bajo esta resolución si veo la barra de desplazamiento horizontal en tu Avatar.

-- Se complica por el Escalado del Sistema Operativo XD. Al final siempre va haber problemas porque el mismo foro utiliza un 95% de la "pantalla" para la tabla de mensajes de las cuales un 16% se reserva para el Autor (NickName, Avatar, etc) y un 85% para el mensaje en sí. Aunque he visto en algunos mensajes que estas medidas cambian x_x.

-- En conclusión el foro no escala bien el Avatar porque utiliza medidas relativas para el contenedor de la imagen pero medidas absolutas para la imagen en si:

Código
  1. .smalltext img {
  2.    max-width: 300px;
  3.    max-height: 400px;
  4. }

- Entonces puedes utilizar una imagen más pequeña a 300x400
« Última modificación: 25 Abril 2020, 03:37 por EdePC » En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.833


I'm fourth.


Ver Perfil WWW
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #4 en: 25 Abril 2020, 04:31 »

-- En conclusión el foro no escala bien el Avatar porque utiliza medidas relativas para el contenedor de la imagen pero medidas absolutas para la imagen en si:

Si no recuerdo mal, esta es una opción de SMF que permite no reescalar la imagen de manera dinámica y en su lugar permitir el scroll.

Pero sí, básicamente, va a depender de tu resolución y del navegador que estes útilizando porque el foro ni reset.css tiene, así que un navegador puede venir con un user agent que agregue bordes a las imagenes o así.
En línea

Tachikomaia

Desconectado Desconectado

Mensajes: 160



Ver Perfil
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #5 en: 22 Mayo 2020, 19:31 »

Pensé que el problema era mío por un zoom de 175%

Lo que debería ocurrir es que el cuadro de texto esté limitado y se achique a medida que el avatar crece. También quizá se le podría achicar la dimensión un poco. El cuadro de texto serñía menos ancho pero más alto.

Creo que así es en todo foro al que fui. Es triste acá tener que ver una cosa "escondida" con barras de desplazamiento.
En línea

EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.094


Ver Perfil
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #6 en: 22 Mayo 2020, 21:28 »

- Bueno, hasta que alguien se anime a retocar la hoja de estilos de la página web mas o menos así:

Código
  1. .avatar {
  2.  width: 100%;
  3. }

-- Siempre se puede utilizar el propio navegador web para hacerlo, por ejemplo Chrome tiene su famoso Overrides en sus herramientas de desarrollador, ahí se puede hacer retoques sobre los recursos de la página web ya sea css o js.

-- Otra manera es crear una miniextensión que haga el trabajo o usar una externa, para mi Chrome utilizo:

manifest.json
Código
  1. {
  2.  "name": "Avatar Width:100%",
  3.  "version": "1.0",
  4.  "description": "Pone el avatar width al 100%",
  5.  "manifest_version": 2,
  6.  "content_scripts": [
  7.    {
  8.      "css":     [ "avatar.css" ],
  9.      "matches": [ "https://foro.elhacker.net/*" ]
  10.    }
  11.  ]
  12. }

avatar.css
Código
  1. .avatar {
  2.  width: 100%;
  3. }



En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.833


I'm fourth.


Ver Perfil WWW
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #7 en: 22 Mayo 2020, 23:30 »

Dejarlo con el width en 100% significa que va a agrandar imagenes. Sería mejor poner max-width en 100%, las imagenes así solo se encogen si el ancho llega a sobrepasar el contenedor.

El caso en el que tenemos ahora mismo es que las imagen no se reescalan y se puede apreciar la imagen tal cual (solo que tenemos que hacer scroll).
En línea

el-brujo
ehn
***
Desconectado Desconectado

Mensajes: 19.467


La libertad no se suplica, se conquista


Ver Perfil WWW
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #8 en: 24 Mayo 2020, 10:52 »

Añado a la hoja de estilos style-img.css

Código
  1. .avatar { max-width: 100%; }

Pero creo que sería necesario poner medidas absolutas para

Código
  1. .smalltext img {
  2.    max-width: 300px;
  3.    max-height: 400px;
  4. }

¿Pero que % pongo?

Gracias
« Última modificación: 24 Mayo 2020, 10:56 por el-brujo » En línea

Since 2001, still kicking hard
MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.833


I'm fourth.


Ver Perfil WWW
Re: Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento
« Respuesta #9 en: 24 Mayo 2020, 16:23 »

Esa definición de CSS tambien afecta otras cosas. La definición de .avatar debería tomar preferencia sobre la otra si la "especidad" es correcta, el max-width remplazaría la limitación de 300px. El max-height esta bien con una medida en pixeles, pero es posible quitar la limitación si la agregas también a la definición de .avatar (es mejor usar img.avatar).

Código
  1. img.avatar {
  2.    max-width: 100%;
  3.    max-height: none;
  4. }

Si no hay max-height, la persona en teoría puede poner avatars largos (por ejemplo 100x3000) y sus posts tambien por ende van a hacer la tabla larga.

De preferencia mejor dejar la regla al final del archivo de CSS.

Edit: img.avatar y .smalltext img deberían tener la misma especidad por eso es necesario que vaya después de .smalltext img y no usar .avatar sino img.avatar que es más especifico.
« Última modificación: 24 Mayo 2020, 16:36 por MinusFour » En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines