Need some help using jQuery on my img!

Need some help using jQuery on my img!
0.0 0

#1

Hi! I’m fighting my way through the “Build a Tribute Page” challenge and it’s been going pretty well so far.

I wanted to get out of the habit of using in-line style, so I thought I’d use jQuery to get my top image to fit within the jumbotron & thumbnail space.
But I think I must be doing it wrong.

<body>

  <div class="container">
    <div class="jumbotron">
      <div class="row">
        <div class="col-sm-12">
          <h1 class="text-primary text-center">Tastosis</h1>
          <h3 class="text-center"><em>The Casting Archon</em></h3><br>
          <div class="thumbnail">
            <img src="https://www.gosugamers.net/files/images/news/2015/march/tastosis%20portrait.jpg">
          </div>
          <div class="row">
            <div class="col-sm-6 text-left">
              something
            </div>
            <div class="col-sm-6 text-right">
              something
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $(".thumbnail").children("img").css("width", "100%");
    });
  </script>
</body>

With the above in codepen, the image doesn’t resize, it sticks out to the side.
But if I change the img tag to:

<img style="width: 100%;" src="https://www.gosugamers.net/files/images/news/2015/march/tastosis%20portrait.jpg">

It works no problem…

I’d love to know what it is that I’m missing / misunderstanding!


#2

Oh boy, after fiddling with the codepen settings, apparently it wasn’t working because I used Bootstrap 4 instead of Bootstrap 3. When I switched it over to 3, everything looked a lot closer to the example video.

Is this a general rule for the tutorials here? To use version 3…?


#3

Because Boostrap 4 is so new, most resources that you’ll find will refer to Bootstrap 3 components. Bootstrap’s official documentation is actually very good though,so if you want to use Bootstrap 4, it shouldn’t be too much extra work.


#4

Thanks for letting me know!