多媒体资料滑块图像太大

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