Consulta de resolución óptima del Avatar del foro sin barras de desplazamiento

[BloodSharp]

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#

[rub'n]

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

[BloodSharp]

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#

[EdePC]

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 (css) [Seleccionar] Expandir

.smalltext img {
   max-width: 300px;
   max-height: 400px;
}

- Entonces puedes utilizar una imagen más pequeña a 300x400

[MinusFour]

-- 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í.

[Tachikomaia]

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.

[EdePC]

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

Código (css) [Seleccionar] Expandir

.avatar {
  width: 100%;
}

-- 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 (javascript) [Seleccionar] Expandir

{
  "name": "Avatar Width:100%",
  "version": "1.0",
  "description": "Pone el avatar width al 100%",
  "manifest_version": 2,
  "content_scripts": [
    {
      "css":     [ "avatar.css" ],
      "matches": [ "https://foro.elhacker.net/*" ]
    }
  ]
}

avatar.css

Código (css) [Seleccionar] Expandir

.avatar {
  width: 100%;
}

[MinusFour]

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).

[el-brujo]

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

Código (css) [Seleccionar] Expandir

.avatar { max-width: 100%; }

Pero creo que sería necesario poner medidas absolutas para

Código (css) [Seleccionar] Expandir

.smalltext img {
    max-width: 300px;
    max-height: 400px;
}

¿Pero que % pongo?

Gracias

[MinusFour]

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 (css) [Seleccionar] Expandir


img.avatar {
   max-width: 100%;
   max-height: none;
}

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.