I can not adjust the images to the bootstrap carousel and adjust the images on the img card

Question

I can not adjust the images to the bootstrap carousel and adjust the images on the img card

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I try to add the images to the bootstrap carousel and I can not make them fit the exact size (I always have bigger ones) I tried to review the CSS but I do not understand it perfectly and nothing I try works.

<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; }

This is the css that shows me in the edition of this part (div class="carousel-item active") that right there are the images (the missing part is in the code) I am using bootstrap 3.3.7. The images have a weight of 23MB or approximate each, if anyone knows of a good program to compress the weight I appreciate it too. if they take more information or some other information, they let me know. Thank you in advance!

I have this other problem when trying to adjust the images in the img cards, they remain uneven, they are images with a resolution of 1280x853 and others have 1032x581, how can I adjust and they all fit the same? I was reading a lot and when I modified the CSS and put the witdh: 100% does not do anything ...

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%; }

This is the csss of that

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

the css of this other

in advance, thank you very much, I am looking for a guide to continue advancing. !!

css bootstrap imagen bootstrap-carousel

asked by José Luis Molina Cascante 08.11.2017 в 00:51

source

2 answers

1

You can add a class to the Bootstrap CSS to fix that problem, for example:

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

Then add that class to each of the items in your carrousel in this way:

<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>

I recommend that you check this page so you can see how to easily add a carousel to your site. With that it should work.

answered by 08.11.2017 в 05:29

Can a textarea be given a source? How to parse json to class objects in java?

score 1 · Accepted Answer

Just a bit of css is enough so that all your images have a standard height

.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>