0

Veréis estoy haciendo un slider con Bootstrap 4 que ocupa el 100% del alto (height: 100vh; width: 100%;) y las imágenes que estoy usando al ponerlas en tamaño de móvil en vez de coger la imagen original y hacer un zoom lo que hace es deformarla. Mi segundo problema es que al poner estás imágenes en el slider no salen centradas ya que el ancho de la pantalla es menor al de la imagen y al ponerlas salen descentradas tanto vertical como horizontalmente (estoy usando no background-img). Esto podría hacerse editando las imágenes pero quiero saber si se puede hacer con CSS o js. El tercer problema sería como alinear el texto de carousel-caption en el centro en vez de debajo donde se pone por defecto (he visto algún post que lo hacían con traslaciones de css en Y pero no me ha quedado muy claro. Gracias

HTML

<div id="mainCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#mainCarousel" data-slide-to="1"></li>
        <li data-target="#mainCarousel" data-slide-to="2"></li>
        <li data-target="#mainCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner slider">
        <div class="carousel-item active">
          <img class="d-block w-100" src="img/slides/slide1.jpg" alt="First slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide5.jpg" alt="Second slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide3.jpg" alt="Third slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide4.jpg" alt="Forth slide">
            <div class="carousel-caption d-flex justify-content-center align-items-cent">
                <h3>Route</h3>
            </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

CSS

.slider{
height: 100vh;
max-width: 100%;}
1
  • Añade el código, para poder ver con más claridad el problema, pero si el tema es como dice el título existen muchas formas de cómo solucionarlo. Commented el 9 dic. 2017 a las 15:04

3 respuestas 3

2

Al utilizar librerías Bootstrap deberás añadir nuevos estilos con mayor autoridad, es decir añadirle el atributo !important.

Para que las imágenes se adapten sin problema aún contenedor se utiliza el siguiente estilo:

max-width: 100%; height: auto; 

Si tienes imágenes de fondo, para no perder la cálidad de las imágenes de fondo debes realizarlo por medio de background-cover:

Esto hace posicionar la imagen ocultando ciertas partes de la imagen con estilos css:

Ejemplo:

#image {
height: 500px;
max-width: 100%;
}

#image {
  background-image:url(http://www.imgbase.info/images/safe-wallpapers/photography/winter/11288_winter.jpg);
  background-repeat: no-repeat;
  background-position: 0% 75%;
  background-size: cover;
}
<div id="image"></div>

Por último solo queda jugar con los estilos apoyándote con la herramienta de navegador y así ir viendo que ocasiona el problema o la vez manipular las posiciones del background a lo que mejor se adapte al diseño background-position: 0% 75%;.

Para centrar el texto puede añadir el siguiente estilos:

text-align: center; margin: 0 auto;

Si deseas añadir animación del texto del slider lo puedes realizar con las librerías animate.css puedes observar algunos ejemplos en su sitio oficial.

Otras referencias En la siguiente fuente

1
  • @SamuelReyes Intenta realizar ésto max-width: 100%; height: auto; con el atributo !important las librerías Bootstrap puede que esté ocasionando problemas por eso mencionó que tienes que ir jugando con los estilos mediante la herramienta del navegador ir viendo que problema está ococionando ir desactivando estilos y añadiendo otros, el problema debe estar en las librerías con algún estilo, porque el procedimiento que he publicado siempre funciona, y es el más común, es la regla que se útiliza para estos casos. Commented el 9 dic. 2017 a las 15:52
0

Pero al ser un carousel de Bootstrap no es una imagen de fondo sino varias etiquetas img, entonces no podría utilizar los estilos de background-img. Además quiero que ocupe el 100 del alto usando "height:100vh" y si uso el auto es responsive pero no ocupa todo el alto

4
  • al publicar una respuesta estás habilitado para responder en los comentarios de la respuesta publicada, ahora mi pregunta es si utilizas las librerías CSS de Bootstrap? Commented el 9 dic. 2017 a las 15:36
  • Si estoy utilizando las librerías de CSS de Bootstrap. Commented el 9 dic. 2017 a las 15:39
  • Debes manipular el código con la herramienta del navegador ir inspeccionado los estilos... Por eso mencioné que debes añadir estilo con mayor autoridad añadiendo el atributo !important ejemplo heigh:100vh!important; Commented el 9 dic. 2017 a las 15:47
  • Vale probaré eso. Commented el 9 dic. 2017 a las 15:49
0

He conseguido el posicionamiento del titulo y he ajustado con photoshop la imagen a 1920*1080 pero al redimensionar la página la imagen se deforma y no se adapta. Tiene los atributos height: 100vh y max-width: 100% No puedo poner el height auto porque quiero que ocupe el 100% de mi página. Es una etiqueta img, no puedo usar background-img porque es un carousel de bootstrap 4.

1
  • Todo fuera más sencillo si se realizarán diseños propios sin librerías donde quedan código que no se utiliza, las librerías tienen sus códigos definidos por defaul y para hacer algunos cambios tocaría añadir otros atributos en fin mucho problemas yo prefiero diseño propios, pero tienes una gran ventaja de utilizar Bootstrap es que en la web encontrarás millones de ejemplos de slider con Bootstrap.
    – Otto
    Commented el 9 dic. 2017 a las 21:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.