2 votes

pourquoi cette image n'est pas en taille réelle ?

J'essaie de rendre cette image en taille réelle, mais il reste de l'espace sur le côté droit.

CSS/HTML

/* Header */

.header {
  background: url('https://picsum.photos/1920/1080') center center no-repeat;
  background-size: cover;
}

.header .header-content {
  padding-top: 15.5rem;
  text-align: left;
}

.header .text-container {
  margin-top: 3rem;
  margin-bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="content">

  <!-- start of header -->
  <header id="header" class="header">
    <div class="header-content"> //here give an class of that image
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="text-container">
              <h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
              <p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
              <a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
            </div>
            <!-- end of text-container -->
          </div>
          <!-- end of col -->
          <div class="col-lg-6">
            <div class="image-container">
              <img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
            </div>
            <!-- end of image-container -->
          </div>
          <!-- end of col -->
        </div>
        <!-- end of row -->
      </div>
      <!-- end of container -->
    </div>
    <!-- end of header-content -->
  </header>
  <!-- end of header -->

</div>

enter image description here

Je veux placer cette image complète à droite (point d'interrogation).

quel endroit doit être corrigé

0voto

Achyuta Pataki Points 64

Ajoutez la largeur et la hauteur à body et html dans head.

html,body {
width:100%;
height:100%
}

.img-fluid{
width:100%
height:100%
}

.image-container{
width:<!--as you wish--> 20px;
height:<!--as you wish--> 20px;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X