Tengo un bootstrap de carrusel en mi sitio web.
Quiero mantener la proporción de aspecto de imagen al cambiar el tamaño en pantallas más pequeñas. Cómo hacer esto?

El siguiente código:

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/bg_good_sex2.jpg" class="img-responsive" alt="verslaafd-aan-porno-goede-seks">
      <div class="container">
        <div class="carousel-caption">
          <h1>Sex Coach <span class="text-primary"> App
          </span></h1>
          <p>Krijg controle op porno- of seksverslaving</p>
          <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/register.php" class="btn btn-lg btn-primary"><i class="icon-chevron-sign-right"></i> <?php echo START_BTN ?></a></p>
          <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/survey_me.php" class="btn btn-success btn-primary btn-lg"><i class="icon-edit"></i> <?php echo BTN_SURVEY_ME ?></a></p>
        </div>
      </div>
    </div>
  </div>
</div><!-- /.carousel -->

Gracias,
Fred

  • Se puede añadir una versión simplificada de su carrusel de que los lectores podrían ser de ayuda.
  • Posiblemente relacionadas con: stackoverflow.com/questions/17290701/…
  • esta solución tiene un fijo de 500px de altura. Quiero que todo el contenido (imágenes y texto) de que el contenedor de ser reducido en pantallas más pequeñas.
InformationsquelleAutor Fred30 | 2013-12-15

2 Comentarios

  1. 2

    Agregar los siguientes estilos para la <img>. Esto mantendrá la relación de aspecto de gran navegadores.

    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;

    Otra opción es utilizar <div>‘s con imágenes de fondo y el uso background-size: cover

  2. 0

    He probado con la respuesta anterior, y muchos otros, sin suerte, pero mediante el uso de herramientas de desarrollo de chrome, me he encontrado con este corto solución. Espero que esto funcione para usted:

    /* Carousel image resize */
    .carousel-inner > .item > a > img,  .carousel-inner > .item > img {
        width: 100%;
    } 

    Su importante utilizar el código exacto con las mismas clases como se describió anteriormente

Dejar respuesta

Please enter your comment!
Please enter your name here