CODEWITHSUNDEEP
bootstrap-4
Dan
Dan

Reputation: 11

How can I get perfect uniform/responsive Images In Bootstrap 4?

I've been teaching myself Bootstrap, and I can't figure out how to get an image to uniformly resize to match the columns' height that I have set up. Right now I have the images set to "height:285px" and "height:215px" using inline styling. It is close, but not perfect (it's off by a couple pixels, if you look really close). If you remove the inline styling, the images become entirely too tall. I'm trying to make the containers of the text and images match perfectly, with width and height. Thank you for your help!

<!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>

Upvotes: 1

Views: 46

Answers (2)

Tom.chen.kang
Tom.chen.kang

Reputation: 183

in your css file, https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css, you can find that the define of the class img-fluid is img-fluid{max-width:100%;height:auto}, you may need to change your img classname to avoid the high level define cover your settings

Upvotes: 0

Vinay
Vinay

Reputation: 2339

there is no col-xs-* or col-xl-* in bootstrap 4 instead use col-* or col-lg-* class 

<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>

Upvotes: 1

Related Questions