Galerie Slider Bilder zu groß

Question

Dies ist meine erste Post auf Stackoverflow. Es tut mir leid für einige untypische Sachen in diesem Post.

Ich habe eine Django-Website mit einem Galerie-Schieberegler programmiert, aber ich habe keine Ahnung, warum die Bilder viel zu groß sind. Schau hier: https://imgur.com/a/YNxu7

Ich habe viele Stunden damit verbracht, es zu reparieren, aber ohne Erfolg.

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

Ihre Bilder sind natürlich ziemlich groß, so dass, während sie der Größe verändert werden immer, sie nicht genug Ändern der Größe sind. Ich habe versucht, die Größe des Bildes selbst einzustellen und es bewirkt, dass der Schieberegler seine Größe auch justiert. Daher beschränkt sich der Schieberegler auf das Bild, anstatt dass das Bild auf den Schieberegler beschränkt ist. Sie haben Ihr CSS nicht hochgeladen, aber Sie könnten versuchen, eine Größe für den Schieberegler zu definieren und dann Ihr Bild auf diese Größe zu beschränken (indem Sie natürlich seine Proportionen beibehalten), indem Sie die maximale Breite und/oder Höhe auf 100% setzen. und der andere zu auto. Wenn Sie feststellen, dass das Bild immer noch zu groß ist (weil das Seitenverhältnis beibehalten wird), können Sie das Bild entweder manuell skalieren oder stattdessen als Hintergrundbild festlegen. In diesem Fall können Sie background-size: contain verwenden.