Estoy tratando de crear un componente deslizante de zeto para usar en mi proyecto. El problema al que me enfrento actualmente es que el control deslizante tiene una altura de 0 a menos que establezca una altura codificada como height: 50rem; . No puedo detectar qué está causando esto o por qué.
Puede encontrar un fragmento de código de trabajo aquí: https://jsfiddle.net/fj640arc/1/
Debe eliminar height: 50rem; en la clase .slider CSS para ver cómo se ve. No debería codificar una altura para los controles deslizantes.
También se agradecería cualquier ayuda en las imágenes receptivas para este control deslizante. ¿Cómo puedo mejorar las imágenes de este control deslizante para poder encajar correctamente en el control deslizante y no romperlo?
¡Gracias!
Si está buscando agregar un tamaño de altura sensible, intente cambiar la altura para usar vh en lugar de rem. Por ejemplo, podrías usar:
.slider { max-width: 114rem; height: 50vh; position: relative; box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15); }vh significa altura de la ventana gráfica, y establecerlo en 50 garantizará que su control deslizante siempre esté al 50% de la altura de la pantalla, independientemente de las dimensiones particulares de la pantalla.
Si está buscando implementar un diseño receptivo aún más, deberá considerar varios tamaños de pantalla.
Metaetiquetas
Incluir una metaetiqueta lo ayudará a establecer el nivel de zoom y ajustarlo según las dimensiones de la pantalla. La siguiente metaetiqueta es probablemente lo que está buscando, pero lea más en línea:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> La parte width=device-width establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Diseño de cuadrícula y Flexbox
A continuación, vería cómo diseñas tu pantalla. Dos formas muy buenas de hacer esto es implementando un diseño de cuadrícula o caja flexible. W3Schools brinda excelente información sobre estas dos técnicas.
Preguntas de los medios
Finalmente, también puede incluir consultas de medios para usar cierto código CSS según las dimensiones de la pantalla. Por ejemplo, este código CSS se ejecutará si el navegador tiene 600 px o menos:
@media only screen and (max-width: 600px) { body { background-color: lightblue; } }También puede usar vh, em y rem en sus consultas de medios si los píxeles no son lo que le gustaría comparar.
Cuando coloca elementos, los saca del flujo de documentos.
Tienes que quitar el
posición: relativa; declaración en el slider__item-list