html - 在 Bootstrap 中调整图像大小

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 元素使用 img-responsive1。

之后，在你的 css 中将 img-responsive 类的最大宽度更改为 100%

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

确保图像适合其容器。