1

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Intento agregar las imagenes al carrusel de bootstrap y no logro hacer que se ajusten al tamaño exacto (siempre me quedan más grandes) he intentado revisar el css pero tampoco lo entiendo a la perfección y ninguna cosa que intento funciona.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

  <link href="vendor/bootstrap/css/footer.css" rel="stylesheet">
<title>FCHMAINTENANCE</title>
<?php include './inc/link.php'; ?>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">


  <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> 
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="5"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide 1 - Set the background image for this slide in the line below -->
      <div class="carousel-item active" style="background-image: url('img/Carrusel/Cleaning Supplies 1.png')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">Cleaning Supplies</h3>
          <p>This is a description for the 1 slide.</p>
        </div>
      </div>
      <!-- Slide 2 - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('img/Carrusel/All you need to keep your floors up.. 6.png')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">All you need to keep your floors up</h3>
          <p>This is a description for the 2 slide.</p>
        </div>
      </div>
      <!-- Slide 3 - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('img/Carrusel/Rental equipment5.png')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">Rental Equipment</h3>
          <p>This is a description for the 3 slide.</p>
        </div>
      </div> 
          <!-- Slide 4 - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image: url('img/Carrusel/Maintenance prevention and repair 3.png')">
        <div class="carousel-caption d-none d-md-block">
          <h3>Maintenance prevention and repair</h3>
          <p>This is a description for the 4 slide.</p>
        </div>
      </div>
          <!-- Slide 5 - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image: url('img/Carrusel/Parts and accessories 4.png')">
        <div class="carousel-caption d-none d-md-block">
          <h2 style="color:green">Parts and Accessories</h2>
          <p>This is a description for the 5 slide.</p>
        </div>
      </div>
          <!-- Slide  - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image: url('img/Carrusel/New Equipment.jpg')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">New Equipment </h3>
          <p>This is a description for the 6 slide.</p>
        </div>
      </div> 

        <div class="carousel-item" style="background-image: url('img/Carrusel/New_Batteries.jpg')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">New Batteries </h3>
          <p>This is a description for the 7 slide.</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>
</header>

.carousel-item { height: 65vh; min-height: 300px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Este es el css que me muestra en la edición de esta parte (div class="carousel-item active") que ahí mismo van las imagenes (en el código sale la parte que falta) Estoy usando bootstrap 3.3.7. Las imagenes tiene un peso de 23MB o aproximadas cada una, si alguien sabe de algún buen programa para comprimir el peso lo agradezco demasiado. si ocupan más información o algún otro dato me avisan. De ante mano muchas gracias!!

Tengo este otro problema al intentar ajustar las imagenes en los card img me quedan disparejas, son imagenes con una resolución de 1280x853 y otras tienen 1032x581, como puedo hacer para ajustar y que todas me queden igual?? estuve leyendo bastante y al modificar el css y ponerle el witdh:100% no me hace nada...

Cleaning Products Supplies Description

Learn More New Equipment Description

Learn More Green Cleaning Description

Learn More New Batteries Description

Learn More Cleaning Equipment Maintenance Description

Learn More Equipment Delivery and Repair Description

Learn More

.card-columns .card { display: inline-block; width: 100%; }

Este es el csss de esa

.card-img-top { width: 100%; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); }

el css de esta otra

de ante mano muchas gracias, busco una guia para seguir avanzando.!!

2 respuestas 2

2

Solo basta con un poco de css para que todas tus imágenes tengan un height estándar

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.card-columns .card {
  display: inline-block;
  width: 100%;
}

.card-img-top {
  width: 100%;
  height: 200px !important; //esta es la parte importante para que todas tus card-img tengan la misma medida sin importar el tamaño de la imagen
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>FCHMAINTENANCE</title>

<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">

<header>
  <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>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide 1 - Set the background image for this slide in the line below -->
      <div class="carousel-item active" style="background-image: url('https://placeimg.com/800/800/people/sepia')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">Cleaning Supplies</h3>
          <p>This is a description for the 1 slide.</p>
        </div>
      </div>
      <!-- Slide 2 - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://placeimg.com/1000/1000/arch')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">All you need to keep your floors up</h3>
          <p>This is a description for the 2 slide.</p>
        </div>
      </div>
      <!-- Slide 3 - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://placeimg.com/1000/1000/animals')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">Rental Equipment</h3>
          <p>This is a description for the 3 slide.</p>
        </div>
      </div>
      <!-- Slide 4 - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://placeimg.com/1000/1000/tech')">
        <div class="carousel-caption d-none d-md-block">
          <h3>Maintenance prevention and repair</h3>
          <p>This is a description for the 4 slide.</p>
        </div>
      </div>
      <!-- Slide 5 - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://placeimg.com/1000/1000/people/sepia')">
        <div class="carousel-caption d-none d-md-block">
          <h2 style="color:green">Parts and Accessories</h2>
          <p>This is a description for the 5 slide.</p>
        </div>
      </div>
      <!-- Slide  - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://placeimg.com/1000/1000/tech/grayscale')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">New Equipment </h3>
          <p>This is a description for the 6 slide.</p>
        </div>
      </div>

      <div class="carousel-item" style="background-image: url('https://placeimg.com/1000/1000/tech/sepia')">
        <div class="carousel-caption d-none d-md-block">
          <h3 style="color:green">New Batteries </h3>
          <p>This is a description for the 7 slide.</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>
</header>

<body>
<br><br><br>

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://placeimg.com/1000/500/people/grayscale" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  
   <div class="card">
    <img class="card-img-top img-fluid" src="https://placeimg.com/300/300/arch/grayscale" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
    <div class="card">
    <img class="card-img-top img-fluid" src="https://placeimg.com/800/800/arch/grayscale" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
</div>

</body>

11
  • en el css que debo tomar en cuenta?? Commented el 8 nov. 2017 a las 0:57
  • El contenedor que tiene la imagen tienes que ponerle un height fijo, así como te puse en el ejemplo
    – Alvarez
    Commented el 8 nov. 2017 a las 1:19
  • Ya lo puse pero siguen iguales sin ajustarse las imagenes Commented el 8 nov. 2017 a las 1:29
  • deberas de colocar mas informacion entonces, incluyendo el css, y el html.
    – Alvarez
    Commented el 8 nov. 2017 a las 2:06
  • amigo ese es todo el css que me da bootstrap o el que encuentro... si tienes tiempo puedo subir el código a alguna página lo descargas y lo ves así tal vez te hagas una idea Commented el 8 nov. 2017 a las 3:01
1

Puedes agregar una clase al CSS de Bootstrap para arreglar ese problema, por ejemplo:

.imgnormalizada img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

Luego agrega esa clase a cada uno de los ítems de tu carrusel de este modo:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item imgnormalizada active">
      <img src="la.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>LA is always so much fun!</p>
      </div>
    </div>

    <div class="item imgnormalizada">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item imgnormalizada">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Te recomiendo que cheques esta pagina para que veas cómo agregar un carrusel a tu sitio de forma sencilla. Con eso debería funcionar.

2
  • Muchas gracias, voy a revisar Commented el 8 nov. 2017 a las 4:51
  • Vale, me avisas si te funcionó. Commented el 8 nov. 2017 a las 5:30

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.