如何在Bootstrap 4中获得完美的统一/响应图像？

时间：2019-04-07 03:11:49

标签： bootstrap-4

我一直在自学Bootstrap，但我不知道如何使图像统一调整大小以匹配我设置的列的高度。现在，我使用嵌入式样式将图像设置为“ height：285px”和“ height：215px”。它很近，但并不完美（如果看起来真的很近，相差两个像素）。如果删除嵌入式样式，则图像将变得太高。我正在尝试使文本和图像的容器在宽度和高度上完全匹配。谢谢您的帮助！

<!DOCTYPE html>
<html>
<head>
    <title>Trying Bootstrap Two</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        alert('Trying this whole bootstrap thing');
    </script>
    <style>
    main {
        border-style: solid;
        border-width: 2px;
        border-color: #333333;
        border-radius: 5px;
        padding: 5px;
        margin: 2px;
    }
    img {
        width: auto;
        background-color: #cccccc;
        object-fit: scale-down;
        overflow: hidden;
    }
    footer {
        text-align: center;
    }
    article {
        background-color: #cccccc;
        padding: 10px;
        margin: 10px;
    }
    hr {
        border: 1px solid #333333;
    }
    </style>
</head>

<div class="container-fluid">
    <main>
        <header>
            <h1 class="col-xl-12 col-md-12 col-sm-12 col-12">A Design By Dan</h1>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <a class="nav-item nav-link" href="#">Home</a>
            <a class="nav-item nav-link" href="#">About</a>
            <a class="nav-item nav-link" href="#">Contact</a>
            <div class="navbar-nav ml-auto">
                <form class="form-inline">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
    </header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <article>
                    <h1>Article One</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                </article>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <article>
                     <h1>Article Two</h1>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                </article>
            </div>
            <div class="col col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <article>
                    <div class="d-flex justify-content-center">
                        <img class="img-fluid" src="http://harakalmusic.com/wp-content/uploads/2011/03/guitars-m-400x400.png" style="height:285px;">
                    </div>
                </article>
            </div>
        </div>
        <div class="row">
            <div class="col col-xl-6 col-md-6 col-sm-6 col-xs-6">
                <article>
                    <div class="d-flex justify-content-center">
                        <img class="img-fluid" src="http://harakalmusic.com/wp-content/uploads/2011/03/guitars-m-400x400.png" style="height:215px;">
                    </div>
                </article>
            </div>
            <div class="col-xl-6 col-md-6 col-sm-6 col-xs-6">
                <article>
                    <h1>Article Five</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                </article>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-md-12 col-sm-12 col-xs-12">
                <article>
                    <h1>Article Six</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                </article>
            </div>
        </div>
    </div>

    <hr>

        <footer>
            <p>A basic design by Dan : March 21st, 2019</p>
        </footer>
    </main>
</div>

</html>

2 个答案:

答案 0 :(得分：0)

引导程序4中没有col-xs- *或col-xl- *，而是使用col- *或col-lg- *类

<style>
  main {
    border-style: solid;
    border-width: 2px;
    border-color: #333333;
    border-radius: 5px;
    padding: 5px;
    margin: 2px;
  }

  footer {
    text-align: center;
  }

  article {
    background-color: #cccccc;
    padding: 10px;
    margin: 10px;
  }

  hr {
    border: 1px solid #333333;
  }
</style>
</head>

<body>

<div class="container-fluid">
  <main>
    <header>
      <h1 class="col-12 col-md-12 col-sm-12 col-12">A Design By Dan</h1>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="nav-item nav-link" href="#">Home</a>
        <a class="nav-item nav-link" href="#">About</a>
        <a class="nav-item nav-link" href="#">Contact</a>
        <div class="navbar-nav ml-auto">
          <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </header>
    <div class="container-fluid">
      <div class="row">
        <div class="col-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <article>
            <h1>Article One</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
              veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </article>
        </div>
        <div class="col-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <article>
            <h1>Article Two</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
              veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </article>
        </div>
        <div class="col-4 col-lg-4 col-md-4 col-sm-4">
          <article>
            <div class="d-flex justify-content-center">
              <img class="img-fluid" src="http://harakalmusic.com/wp-content/uploads/2011/03/guitars-m-400x400.png"
                style="height:285px;">
            </div>
          </article>
        </div>
      </div>
      <div class="row">
        <div class="col-6 col-md-6 col-sm-6 col-xs-6">
          <article>
            <div class="d-flex justify-content-center">
              <img class="img-fluid" src="http://harakalmusic.com/wp-content/uploads/2011/03/guitars-m-400x400.png"
                style="height:215px;">
            </div>
          </article>
        </div>
        <div class="col-6 col-md-6 col-sm-6 col-lg-6">
          <article>
            <h1>Article Five</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
              veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </article>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-12 col-sm-12 col-lg-12">
          <article>
            <h1>Article Six</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
              veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </article>
        </div>
      </div>
    </div>

    <hr>

    <footer>
      <p>A basic design by Dan : March 21st, 2019</p>
    </footer>
  </main>
</div>
</body>

答案 1 :(得分：0)

在css文件https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css中，您可以发现类img-fluid的定义为img-fluid{max-width:100%;height:auto}，可能需要更改img类名以避免高级别的定义覆盖您的设置

相关问题
最新问题