python - 图库 slider 图像太大

Question

这是我在 stackoverflow 上的第一篇文章。因此，对于这篇文章中的一些不典型内容，我深表歉意。

我编写了一个带有画廊 slider 的 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

您的图片自然很大，因此在调整大小时，它们的大小调整得不够。我试过调整图片本身的大小，它也会导致 slider 调整其大小。因此，不是将图片约束到 slider ，而是 slider 将自身约束到图片。您没有发布您的 css，但您可能想尝试为 slider 定义一个大小，然后通过将其最大宽度和/或高度设置为 100% 来将您的图像限制为该大小(当然保持其比例)另一个自动。如果您发现它看起来仍然太大(由于它保持纵横比)，您可以手动调整图像大小或尝试将其设置为背景图像，在这种情况下您可以使用 background-size: contain.