调整CSS大小

时间:2018-01-15 20:56:38

标签: css twitter-bootstrap image twitter-bootstrap-3 sass

我目前的情况如下: enter image description here

图像显然太大,所以我在CSS中添加了以下代码:

max-width: 800px;

然后我的形象移动得太高了。正如您在下面的链接中所看到的: enter image description here

我的问题是如何将图像缩小并将其直接放在页脚顶部?所以它就像我在第一张图片中所显示的那样完全适合页脚。

以下是我页面的HTML代码的一部分:

<section class="section-main section-about">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2 class="page-header heading-primary-a">Over mij</h2>
                <p>In lacinia ipsum sit amet ultricies semper. Nulla facilisi. Proin et nulla consequat mauris gravida vestibulum. Donec non risus et velit auctor lobortis. Aliquam in placerat justo. Etiam nisi libero, suscipit vel nulla eget, blandit ultricies quam. Nunc pretium pharetra tellus sed suscipit. Fusce rhoncus metus est, quis facilisis eros luctus vestibulum. Morbi vestibulum, urna vitae feugiat tincidunt, urna magna pharetra enim, id congue lectus elit sit amet quam. Vivamus sit amet enim eros. Etiam nec molestie risus.</p>
                <p>Donec non est gravida, condimentum mauris sed, bibendum lectus. Duis poid.</p>
            </div>
            <div class="col-md-8">
                <img class="over-img" src="../../../images/zaky_upper.png" alt="Zaky">

            </div>
        </div>
    </div>
</section>

这是HTML树的图像,分享HTML代码有点困难,因为它是一个Angular应用程序,我将导航栏,内容和页脚分开。这就是为什么我也通过图像共享HTML代码: enter image description here

以下是CSS代码的一部分:

.page-header {
  margin-top: 30px;
}

.heading-primary, .heading-primary-a {
  color: #FF5700;
}

.heading-primary-a {
  border-bottom: 2px solid #FF5700;
}

.section-main {
  padding-bottom: 0px;
}

.section-about {
  margin-top: 90px;
}

.over-img {
  /* currently commented out */
  /* max-width: 800px; */
}

如果您想查看整个CSS代码,可以在以下链接中找到它:

https://pastebin.com/ZUKyLsT1

提前致谢。

1 个答案:

答案 0 :(得分:0)

嗨我会尝试将图像高度设置为100%并自动调整宽度

search = open ("algo_fg.txt")
fw = open('out', 'w')
for line in search:
    if app in line:
        # print (line)
        fw.writelines(line)
search.close()
fw.close()