Why aren’t the images glued together?

Asked

Viewed 46 times

1

Well I’m making a Carousel, and I want to put another image on the side of the Carousel but it gets a space I wanted to know how to remove, in my attempt I made two Divs float one to the right and left by my Carousel put 70% and for my images I put 30%, but space continues, how to solve ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Olá, mundo!</title>

<style type="text/css">
    .carousel-item{
      margin: 0;
    }
</style>
</head>
<body>

<div class="container clearfix" style="background-color: ;">
   <div class="float-left" style="width: 70%;">
      <div class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
              <img class="img-fluid" src="img2.png">
          </div>
          <div class="carousel-item">
              <img class="img-fluid" src="img3.png">
          </div>
          <div class="carousel-item">
              <img class="img-fluid"  src="img3.png">
          </div>
        </div>
      </div>
   </div>
   <div class="float-right" style="width: 30%;">
      <img class="img-fluid" src="img1.png">
   </div>
</div>

<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>

html

  • That carousel is the bootstrap pattern or did you use some other?

  • bootstrap standard

2 answers

1

If the space problem is on the sides remove the space like this:

<div class="container clearfix" style="min-width: 100% !important">

If you are between the images just change the margin:

<div class="float-left" style="width: 70%; margin: 0;">

and

<div class="float-right" style="width: 30%; margin: 0;">

If the problem is the white space of the original image size:

<style type="text/css">
img{
min-width:100%;
background-repeat: no-repeat;
  background-size: cover;
}
</style>

your code

<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Olá, mundo!</title>

<style type="text/css">
    .carousel-item{
      margin: 0;
    }
img{
min-width:100%;
background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="container clearfix" style="min-width: 100% !important">
   <div class="float-left" style="width: 70%; margin: 0;">
      <div class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
              <img class="img-fluid" src="http://images7.memedroid.com/images/UPLOADED39/53f395f2546f4.jpeg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid" src="https://parseur.com/media/you-shall-not-parse.jpg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid"  src="https://memegenerator.net/img/instances/60314002.jpg">
          </div>
        </div>
      </div>
   </div>
   <div class="float-right" style="width: 30%; margin: 0;">
      <img class="img-fluid" src="https://memegenerator.net/img/instances/60314002.jpg">
   </div>
</div>

<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
 </body>

1


Probably the width of the images are smaller than the 70% that you defined. With this it does not occupy the entire width of the div, leaving a space on the right.

You can solve this by adding the class w-100 in the images, which will add the property width: 100%, causing them to occupy the entire width of the div.

But images need to have a resolution where the width is in the minimum of the same size as the width of the div, otherwise they will "burst" when CSS increases them.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container clearfix" style="background-color: red;">
   <div class="float-left" style="width: 70%;">
      <div class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
              <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid w-100"  src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          </div>
        </div>
      </div>
   </div>
   <div class="float-right" style="width: 30%;">
      <img class="img-fluid" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   </div>
</div>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.