[SOLUCIONADO] Ayuda con detalle de dimensión de un objeto creando una Web

Iniciado por vancedyer, Septiembre 08, 2019, 07:20:08 AM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Septiembre 08, 2019, 07:20:08 AM Ultima modificación: Septiembre 09, 2019, 01:57:21 PM por Gabriela
Buenas estoy haciendo una pagina web de minecraft y el carousel como que se ve muy grande tengo que hacer scroll para que se puedan ver las letras de abajo y me gustaria que ya nada mas entrar a la web se vea todo el carousel sin necesidad de hacer scroll:

Código: text
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="https://wallpaperplay.com/walls/full/4/2/2/234831.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Lorem ipsum dolor sit amet.</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
                      </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://wallpaperplay.com/walls/full/f/8/a/234838.jpg" alt="Second slide">
                     <div class="carousel-caption d-none d-md-block">
                        <h5>Lorem ipsum dolor sit amet.</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
                      </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://wallpaperplay.com/walls/full/1/d/4/234836.jpg" alt="Third slide">
                     <div class="carousel-caption d-none d-md-block">
                        <h5>Lorem ipsum dolor sit amet.</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
                      </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


Código: text
.carousel {
  position: relative;
}



.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}


(La css es la de bootstrap.css)

si podeis ayudarme lo agradeceria, muchas gracias.

Hola amigo,

Prueba fijando una altura en proporción a la pagina, por ejemplo height: 70%

Ahora debes saber que en cada pantalla se verá de diferente tamaño, para que tengas la precaución de subir siempre imágenes con la misma proporción para que al redimensionarlas no se deformen los objetos.


Espero te sea de utilidad.

Saludos!
Nivel 77 No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
<img class="d-block w-100" src="No tienes permitido ver los links. Registrarse o Entrar a mi cuenta" alt="First slide">

Podrias intentar en esta parte agregarle un width="100" o talvez un style="width: 100px !important"

A veces debuggear el css es complicado, por lo que te recomiendo que todo esto lo intentes haciendole click derecho-> inspeccionar elemento y que desde ahi veas cuales son las reglas CSS que estan afectando al elementos y pruebes editarlas.

Saludos !




Con la fuerza del mar, con la paz del rio


Buenas ya lo solucione, tenía que poner vh-100 en los items del carrusel, gracias por la ayuda :)

Enviado desde mi COR-L29 mediante Tapatalk