Question

暂时阅读有关此问题的一般答案。正如我尝试使用它一样，我只是无法使CSS工作并适合我的时间轴。

我正在使用this主题。我一直在尝试用我自己的图片替换关于部分的时间线，但我使用的图片都是不同的尺寸。我似乎无法得到我的一张图片，以适应原件所在的有趣的小圆圈，相信我已经很久了。任何帮助真的很感激。我将下面的代码放在下面，但我知道其中一些重复，因为就像我说的那样，我一直试图修复这些图像。我试图为每个单独的图像制作不同的CSS规则，但我也没有在那个部分上失败。非常感谢任何帮助。

<section id="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">About</h2>
                    </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <ul class="timeline">
                    <li>
                        <div class="timeline-image">
                            <img class="img-circle img-responsive1" src="img/about/1.jpg" alt="">
                        </div>
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <h4 class="subheading">Build or Scale your HR Capability</h4>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted">Properly staffed and positioned Human Resources leaders and teams are strategic enablers of business performance and growth. We help you assess your current HR capabilities and build value adding talent management solutions that will help you move beyond compliance driven personnel management to business integrated Human Resources leadership.</p>
                            </div>
                        </div>
                    </li>
                    <li class="timeline-inverted">
                        <div class="timeline-image">
                            <img class="img-circle img-responsive1" src="img/about/2.jpg" alt="">
                        </div>
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                            <h4 class="subheading">Develop your Leaders</h4>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted">Effective leadership is critical to attracting, engaging, and retaining the people you need to delight your customers and achieve your goals. We help you leverage the strengths of your managers and create insights and actions to develop their weaknesses through individualized feedback and coaching.</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="timeline-image">
                            <img class="img-circle img-responsive1" src="img/about/3.jpg" alt="">
                        </div>
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <h4 class="subheading">Focus and Engage your Team</h4>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted">The most successful businesses have team members that understand the company's goals and are committed to achieving them.  We help you create clarity of purpose and establish goal setting and performance management tools and processes that go beyond score keeping to create a culture of engagement.  </p>
                            </div>
                        </div>
                    </li>
                    <li class="timeline-inverted">
                        <div class="timeline-image">
                            <h4>Be Part
                                <br>Of Our
                                <br>Story!</h4>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

和图像的css

element {
}
.img-circle {
    border-radius: 50%;
}
.img-responsive {
    display: block;
    max-width: 50%;
    height: auto;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

重要的是要注意，我认为先检查链接会对我有所帮助。有一系列的CSS规则也可以扩展到图像上，你可以从HTML中看到时间轴图像，我也可以放在这里，但我认为我的问题足够长。

感谢您的帮助。

Answer 1

首先，请确保您使用正确的类名 img-responsive ，目前在您的html代码中，您正在使用 img-responsive1 作为您的img元素。

之后，在你的css中将img-responsive类的max-width更改为100％

.img-responsive {
    max-width: 100%;
    height: auto;
}

确保图像适合其容器。

Answer 2

您可以使用此图像（使用引导程序）：

 img {
  display: block;
  max-width: 100%;
  height: auto;
}

您可以将它用于以下图像：

  #image_id {
  display: block;
  max-width: 100%;
  height: auto;
}

注意：我们不需要bootstrap来执行此操作。但如果你想使用bootstrap，你可以这样做：

    <div class="row">
<div class="col-md-4">
    <img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>

调整Bootstrap中的图像大小

2 个答案: