Why is this image taking up the fulllength of the page?

why is this image taking up the full length of the screen? the container-fluid class should be shrinking to fit in the grid but its not responding.

<div class="container-fluid px-0">
    <div class="row align-items-center">
      <div class="col-6">
        <h2 class="text-center"></h2>
      </div>
      <div class="col-6">
        <img src="" class="img-fluid" alt="Responsive Image">
      </div>
    </div>
  </div>

Bootstrap columns only control the width, by length do you mean height?

Have a look at this jsfiddle as you can see the image takes up half of the screen width as specified (col-6)

Is this regarding any course or is it your own personal project ?

2 Likes

an img with the class of img-fluid should be responsive and vadjust to its coynterpart correct?

??? do you mean container ?

yes it should be responsive and adjust to the size of the column/div/section it is in.
Have a look at the fiddle and let me know what’s going wrong.

Please give more information

Screenshots, the rest of the code, is bootstrap linked correctly?

2 Likes

screenshot of the result ?
Please paste in your code so that I can run it

2 Likes

Screenshot-2019-9-3%20Museum%20Of%20Candy

1 Like

The image is half of the screen so it’s correct. What’s the problem?

2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Museum Of Candy</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/0f1513aaa1.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
</head>

<body>

<nav id="mainNavBar" class="navbar navbar-dark bg-dark navbar-expand-md py-0 fixed-top">
  <a class="navbar-brand" href="#">CANDY</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navLinks">
    <ul class="navbar-nav">
      <li class="nav-item">
        -<a href="" class="nav-link">HOME</a>-->
      </li>
     </ul>
  </div>
</nav>



  <section class="container-fluid px-0">
    <div class="row align-items-center">
      <div class="col-6">
        <h2 class="text-center">MUSEUM OF CANDY</h2>
      </div>
      <div class="col-6 p-0">
        <img class=img-fluid src="/uploads/short-url/3aEYpfkaLvKeHFyAvlFHKgundp2.jpeg" alt="Responsive Image">
      </div>
    </div>
  </section>








  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
2 Likes

i pasted the html but i think it just showed up as the page

See this: How do I format code in my posts?

I edited it for you

reply please

2 Likes

i don’t understand the problem, looking at bootstrap documentation:

Images in Bootstrap are made responsive with .img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

the width is 100% of parent element (col-6, which is 50% width of row), and the height is auto. So the class does exactly as mention in the documentation.

2 Likes

if i use an image that is square it will shrink it down but if i use one that is not square it dosent and i dont know why it dosent

It’s not going to shrink the height if it doesn’t need to,it will only shrink the height as much as it needs to depending on the image ratio. That’s why if an image is a rectangle and the width doesn’t need to be shrunk to fit into the column then the height will not change. Hope this clears your confusion

2 Likes

too many its in your sentence, unclear what they mean. Please use more specific terms

The aspect ratio of an image describes the proportional relationship between its width and its height, so manipulating both height and width will destroy this aspect ratio, and the image will look horrible.

so you want to control either the width or the height, not both.

given the way webpages are, its easier to have control over the width, and leave the height of the image for what it is.

or manipulate the image in a program like photoshop, that is of course possible.

2 Likes

ok that makes sense. I was doing this with rectangle images for 3 hours before i figured ill try it with a square image and figured out only square images worked

3 Likes