Foro de elhacker.net

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#

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#

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:

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

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

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

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.

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

.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

{
  "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

.avatar {
  width: 100%;
}

(https://i.ibb.co/G5Bn4Wp/cap2.png)

(https://i.ibb.co/HTGdvRq/cap1.png)

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

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

.avatar { max-width: 100%; }

Pero creo que sería necesario poner medidas absolutas para

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

¿Pero que % pongo?

Gracias

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

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.

Ahora funciona perfecto cuando estoy conectado:
(https://i.imgur.com/IrBKzMX.png)

Sin embargo cuando me desconecto vuelve el problema:
(https://i.imgur.com/Q1zVyCK.png)


B#

- Anda! es cierto, por lo que veo se utiliza un style.css para los visitantes, y un style-img.css para los usuarios :xD

- Otra cosa que deberías revisar es porqué está amarillo (con advertencia) tu candadito cuando estás registrado (en la barra de direcciones)

- También veo raro que te muestre la página con fuente serif, si prácticamente todos los elementos del foro tiene puesto font-family: verdana, arial, elvetica, serif implica que tu Sistema Operativo no tiene esas fuentes :o?

Ya veo todos los avatars, enteros, pero bastante pequeños. Supongo que tiene que ver con el hecho de que la página tiene grandes márgenes, partes en blanco en los costados.

El candado con la advertencia amarilla es que hay mixed content en el sitio.


El tamaño va a depender de la resolución que estes utilizando. Las celdas que contienen los avatares y así tienen un porcentaje pequeño para dar prioridad a los mensajes. No hay solución perfecta.