时间戳

首页 > 解决方案 > Bootstrap - 以特定方式缩放图像

javascript - Bootstrap - 以特定方式缩放图像

问题描述

我已经尝试通过谷歌尽可能多地搜索以及自己找出问题，但无论我尝试什么（尽管我的知识非常有限），我都无法弄清楚如何使用引导程序缩放我的图像。

基本上我有两个相邻的弹性框，一个我想显示图像，另一个显示项目清单。每列占据 6 个位置，因此它们是均匀的。问题是我似乎无法缩小我的图像，它是我添加的背景图像的放大版本。

这是我的代码：

<!--about section-->
<section id="about" class="bg-info">
  <div class="container-fluid">
    <div class="row">
      <!--about img col-->
      <div class="col-md-6 about-picture height-80"></div>
      <!--about text col-->
      <div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">

这就是我在我的 css 文件中使用的图像本身

.about-picture{
    background: url(../VScode/images/background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

非常感谢您对此的任何帮助！谢谢！！

标签： javascriptcss

解决方案

background-size: cover;将“调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘中切掉一点”。

您可能想要选择不同的background-size(and background-repeat)。请参阅：MDN：背景大小

推荐阅读