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!