¿Cómo hago para elegir la altura de la imagen en un div de portada de fondo?

Tengo un control deslizante en mi página con la cubierta de fondo de propiedad aplicada para que se ajuste a todo. El deslizador también tiene una altura fija de 50vh. El fondo siempre termina cortando cosas de la imagen que no quiero. ¿Cómo debo elegir el ancho x alto correcto sabiendo que el sitio web se verá en dispositivos muy diferentes?

Leer los documentos debería ayudar. Pero dado que no hay código para ayudar a depurar y no está claro lo que quiere, realmente no podemos ayudarlo. Preguntas como esta probablemente encajarían mejor en StackOverflow de todos modos
Calcule la altura máxima que se mostrará en la pantalla más grande (de 800 a 1200 px) y haga que su imagen tenga esa altura x 4 veces más ancho. (entonces h1000px x w4000px). Olvídate de controlar el contenido exacto o los bordes de la imagen. Tiene que ser un campo general grande con las mejores cosas en la parte superior central. Espere que se recorte mucho, siempre centrado con la parte superior fija. Los teléfonos solo verán una sección superior central estrecha. Las pantallas grandes lo verán todo.
@Webster Evite responder preguntas en los comentarios. Esta es una respuesta que votaría. Gracias.
Esto es demasiado amplio y poco claro para responder de alguna manera. ¿Cómo podríamos saber cuál es el ancho o la altura correctos de un elemento en su diseño cuando no tenemos idea de cómo se supone que debe verse?

Respuestas (2)

En primer lugar, si su sitio web se verá en muchos dispositivos diferentes, debe usar relativo widthen los elementos. Está configurando el heighten su control deslizante, por lo que obedecerá esa regla, haciendo que parte del banner se recorte para evitar la distorsión de la imagen.

  • Use la viewportetiqueta meta para establecer que el ancho del elemento del cuerpo sea el mismo que el ancho de su dispositivo. <meta name="viewport" content="width=device-width, inicial-scale=1">esto le ayudará con algunos otros problemas de respuesta.
  • Use la widthpropiedad para dimensionar sus elementos: manténgase con valores relativos, como 100%, 75%, etc.
  • Cree media queriespara evitar que su banner se vea demasiado grande en pantallas grandes.

Puede leer más sobre el diseño web receptivo aquí

Tiene un control deslizante con una altura de 50vh (50% de la altura de la ventana gráfica), por lo tanto, siempre que cambie el tamaño de la pantalla, el tamaño del control deslizante cambiará, por lo que será difícil ajustar una imagen rasterizada (png, jpg) que mantendrá la misma relación de aspecto en todas partes. Las opciones son hacer que la altura del control deslizante sea fija y luego elegir una imagen de acuerdo con esa altura o usar algunas imágenes basadas en vectores en el control deslizante.

¿Cómo hago para elegir la altura de la imagen en un div de portada de fondo?
RespuestasAquíPolítica de privacidad1y, 0v