Gallery Slider Images太大

Question

这是我在stackoverflow上的第一篇文章。所以我很抱歉在这篇文章中的一些不典型的东西。

我已经编制了一个带有图库滑块的Django网站，但我不知道为什么图像太大。看这里：https://imgur.com/a/YNxu7

我花了很多小时来修复它，但没有成功。

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

您的图片自然是相当大的，所以当他们越来越调整，他们没有足够的调整。我已经尝试调整图片本身的大小，并导致滑块也调整其大小。因此，而不是图片被约束到滑块，滑块约束自己的图片。你没有发布你的CSS，但你可能想尝试定义滑块的大小，然后通过将其最大宽度和/或高度设置为100％来将图像限制为该大小（当然保持其比例）另一个是自动的。如果您发现它仍然看起来过大（由于它保持纵横比），您可以手动调整图像大小或尝试将其设置为背景图像，在这种情况下，您可以使用background-size: contain。