Galerie Slider Images Too Big

Question

Ceci est mon premier article sur stackoverflow. Donc je suis désolé pour certains trucs atypiques dans ce post.

J'ai programmé un site Web Django avec un curseur de galerie, mais je ne sais pas pourquoi les images sont trop grandes. Regardez ici: https://imgur.com/a/YNxu7

J'ai passé beaucoup d'heures à le réparer mais, mais sans succès.

{% block content %} 
 

 
<!-- 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script 
 
--> 
 

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

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner"> 
 
      <!-- Pictures --> 
 
      <div class="item active"> 
 
       <img src="/static/img/portfolio/1.jpg" class="img-responsive" alt="Cover1"> 
 
       <div class="carousel-caption"> 
 
        <h3>Picture 1</h3> 
 
        <p>Some details to it</p> 
 
       </div> 
 
      </div> 
 

 
      <div class="item"> 
 
       <img src="/static/img/portfolio/2.jpg" class="img-responsive" alt="Cover2"> 
 
       <div class="carousel-caption"> 
 
        <h3>Picture 2</h3> 
 
        <p>Also some details</p> 
 
       </div> 
 
      </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> 
 
{% endblock %}

Answer 1

Vos photos sont naturellement assez grand, donc pendant qu'ils se redimensionnés, ils ne sont pas assez Redimensionnement. J'ai essayé d'ajuster la taille de l'image elle-même et cela fait que le curseur ajuste sa taille aussi. Ainsi, au lieu que l'image soit contrainte par le curseur, le curseur se contraint à l'image. Vous n'avez pas posté votre CSS, mais vous pouvez essayer de définir une taille pour le curseur et ensuite rendre votre image contrainte à cette taille (en gardant ses proportions, bien sûr) en définissant sa largeur maximale et/ou sa hauteur à 100% et l'autre à l'automobile. Si vous trouvez que cela semble encore trop grand (en raison du maintien du rapport d'aspect), vous pouvez redimensionner manuellement l'image ou essayer de la définir en tant qu'image de fond à la place, auquel cas vous pouvez utiliser background-size: contain.