1. Inicio
  2. Pregunta y respuesta
  3. ¿Cuál es un buen tamaño de imagen nativa para usar con un control deslizante de ancho completo (100% del navegador)?

¿Cuál es un buen tamaño de imagen nativa para usar con un control deslizante de ancho completo (100% del navegador)?

2012-06-25 13 views
21

Estoy construyendo un sitio web que incluye un control deslizante de ancho completo; 100% de ventana del navegador. El CSS sería así¿Cuál es un buen tamaño de imagen nativa para usar con un control deslizante de ancho completo (100% del navegador)?

.slider { 
width:100%; 
}

... donde los padres del deslizador es <body>, no un div contenedor.

Mi dilema es que si utilizo una imagen de 1600px de ancho y la escaloo al 100% usando CSS, esto estará bien para cualquiera que maximice el navegador (ancho de monitor) es menor que 1600px ya que la imagen será no reducido (dejando las consideraciones de tamaño móvil/receptivo fuera de la imagen por el momento), sin embargo, alguien que use un navegador maximizado en un monitor muy grande tendrá esa imagen escalada hacia abajo y por lo tanto tendrá una apariencia ligeramente degradada.

Revisé un par de controles deslizantes y están usando anchos de imagen de aproximadamente 2000px, pero ¿hay un ancho que no necesitaría ampliarse en un gran porcentaje de monitores?

Observe por favor: Soy no preguntar acerca de CSS, un sistema de red, boostrap gorjeo, un sitio sensible o de adaptación, un sitio web de anchura 960 o algo por el estilo. Tampoco estoy hablando de un control deslizante que es el 100% del contenedor del sitio web . Simplemente estoy preguntando sobre el ancho de píxel del archivo de imagen utilizado para crear un control deslizante que está escalado al 100% del ancho del navegador.

Fuente

2012-06-25 byronyasgur

+1

1920px es suficiente – SVS

Respuesta

18

1920px es el más alto que desea ir. Eso se considera el "high-end" para los tamaños de resolución de pantalla, y cualquier cosa más alta hará que los navegadores actúen. Siempre que establezca el ancho de la diapositiva en 100%, se ajustará a los tamaños de pantalla de una resolución superior a 1920 sin problemas. Esto también resolverá el problema de ocupar demasiado ancho de banda y no afectará el tiempo de carga (que es clave para la funcionalidad de su sitio).

Fuente

2012-06-25 17:34:31 Jeff

+0

Lo sentimos, parece que no hice la pregunta correcta - ver mi edición – byronyasgur

+0

Gracias por su respuesta completa, pero no entiendo por qué está poniendo en columnas en absoluto ... todo lo que necesito desde un punto de vista css es .container {ancho: 100%} donde el contenedor del padre es ... mi pregunta se relaciona puramente con el ancho de píxel de la imagen utilizada ... nuevamente lo siento si no lo he dejado en claro. – byronyasgur

+0

genera columnas para que su imagen se ajuste dinámicamente al tamaño de la pantalla. Debería configurar su diapositiva para que sea el 100% del ancho de las columnas. Por lo tanto, si una pantalla es de 960 px, su imagen sabrá generar al tamaño de 16 columnas o si la pantalla es de 1060px sabrá generar en base a 18 columnas. "columnas" no representa la cuadrícula física que puede ver un usuario en la pantalla, sino una cuadrícula que el navegador utiliza como puente para que el idioma base el tamaño de los contenidos en una página específica por resolución de pantalla. Es un método de desarrollo web sensible – Jeff

1

960px es el ancho completo estándar para cualquier área de contenido de una página web con el que HOPEFULLY no tenga ningún desbordamiento en una ventana completa del navegador.

http://960.gs/

Fuente

2012-06-25 17:30:10 JROB

+0

¿Estás seguro de que entiendes mi pregunta? Estoy haciendo un control deslizante de ancho del 100% - 100% de la ventana del navegador. – byronyasgur

+0

Bueno, a menos que lo haga dinámicamente, no hay manera de saber qué es 100% en píxeles, ya que la resolución de cada persona es diferente. – JROB

+0

Sí, y, por cierto, lo siento, pero creo que mi pregunta no dejó muy claro el "ancho total". Sí, sé que tendría que ser 100%, lo que estoy preguntando es cuál es la mejor guía sobre dónde empezar, o en otras palabras, el ancho máximo más probable al que un agente maximizaría su agente; para evitar escalar la imagen ... para preguntarlo de otra manera, ¿existe un ancho de monitor físico que generalmente consideramos "tan amplio como suele ser"? – byronyasgur

0

Como ya se ha mencionado anteriormente, el ancho estándar es de 960 píxeles. Pero muchos sitios lo están adaptando, por lo que no se puede decir con certeza. Mi monitor, por ejemplo, tiene una resolución de 2560x1440. Nadie hace una resolución de sitio tan grande.

Si quiere hacer un sitio adaptable como monitor y dispositivo móvil, solo le aconsejo que use el twitter bootstrap o algo similar. También puede usar el sistema de grillas, por ejemplo: designinfluences.

Fuente

2012-06-25 17:44:55 Xella

+0

Creo que su respuesta, al igual que las demás (a pesar de mis mejores esfuerzos) es confusa mi pregunta con el ancho estándar de un sitio web. Más bien, estoy preguntando por las pantallas típicas más grandes para las que las personas se desarrollan, no por el diseño receptivo sino por el ancho de píxel del archivo jpeg utilizado en un 100% de navegador con control deslizante (cuando se maximiza en una pantalla grande). Es útil no hacerlo _ "Mi monitor, por ejemplo, tiene una resolución de 2560x1440. No ** uno hace una resolución de sitio tan grande **." _ – byronyasgur

+0

Lea esto, tal vez ayude más: http: // stackoverflow. com/questions/456250/recommended-website-resolution-width-and-height – Xella

+0

No .. AFAICT esto no es lo que estoy preguntando en absoluto, esa pregunta suena como una discusión acerca de cómo ajustar el CSS para las atenuaciones del monitor: observe el deslizante en este tema, es un espectáculo bastante común, en este caso las imágenes se escalonan desde 2100px, lo que significa que el tema se romperá si alguien en un monitor más ancho que 2100px maximiza http://demo.udfrance.com/voltage/wordpress / – byronyasgur

1

Según las estadísticas globales de resoluciones de pantalla del año 2013, el tamaño de pantalla de 1920x1080 es el cuarto entre los 10 mejores tamaños de pantallas actuales. Esta es también la última pantalla de alta definición para los monitores hasta el momento.

Fuente

2014-01-02 21:25:19 Lightcoder

Cuestiones relacionadas

 Cuestiones relacionadas