Chicos, estoy aprendiendo desarrollo web y tengo problemas para hacer que la imagen responda. ¿Puedes decirme qué debo cambiar aquí?
Código HTML
<div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">CSS
#hero { width: 100%; height: 100vh; background-color: rgba(39, 37, 34, 0.8); overflow: hidden; padding: 0; } #hero .carousel-item { width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; } #hero .carousel-item::before { content: ""; background-color: rgba(12, 11, 10, 0.5); position: absolute; top: 0; right: 0; left: 0; bottom: 0; } #hero .carousel-container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; }Puede hacer que el div de su imagen cambie de tamaño automáticamente si lo coloca en un div envolvente que permita cambiar el tamaño. Solo asegúrese de que su div de imagen bloquee la relación de aspecto.
Nota: Aparecerá una barra de desplazamiento si la relación de aspecto de su envoltorio no coincide con la relación de aspecto de la imagen.
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; } .resizeable-container { display: flex; align-items: center; justify-content: center; resize: both; overflow: auto; border: thin dashed red; width: 200px; /* Initial size */ } .banner { background-image: url(http://placekitten.com/240/180); background-size: cover; aspect-ratio: 4 / 3; /* 240/180 = 4/3 */ width: 100%; } <div class="resizeable-container"> <div class="banner"></div> </div>