I'm trying to solve the first project of freeCodeCamp responsive web design unit. To pass the tests my image should be responsive but it can't exceede it's original size (and other user stories, that's why there are so many ids).
That was working but then I tried to crop the image height as I wanted it to look like a banner. I tried this by adding the object-fit:cover attribute to the image and setting it's parent div height to 500px. Then two things happened:
object-fitdoes not seem to change the image.- The image caption gets pushed below the image but all the tags that followed the parent div stay in place, over the image.
I've tried:
- Deleting the
heightproperty of the parent solves the second issue but the image stays the same. - Setting a
max-heightto the image to100%also solves the second issue but the image gets resized to 500px instead of cropped to the same size. - I also understand that I could just crop the image in another program to a proper size and then use it here, but I really want to understand how this works as I believe I'm breaking something else.
Are 1 and 2 related somehow?
What's making issue 2 this happen? I expected everything to be pushed down by the image, not just the caption, as I never set the position for anything.
Is there a better way to crop a responsive image to a specific height while keeping the max-width to it's original size?
Here's the CodePen and my code.
HTML
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Inconsolata" />
<body>
<main id="main">
<header>
<h1 id="title">Magrathean sperm whale</h1>
<p id="subt">The co-product of the Infinite Improbability Drive</p>
</header><br>
<div id="img-div">
<img id="image" src="https://i.pinimg.com/originals/0c/72/27/0c7227db2307f978d2f8489dcd646712.png" alt="Sperm whale and bowl of petunias falling from the sky">
<figcaption id="img-caption">
Sperm whale and bowl of petunias falling from the sky
</figcaption>
</div><br><br>
<section id="tribute-info">
<h2>Whale questions during his short life:</h2>
<ul>
<li><strong>What</strong>'s happening?</li>
<li><strong>What</strong>'s my purpose in life?</li>
<li><strong>Why</strong> am I here?</li>
<li><strong>Who</strong> am I?</li>
<li><strong>What</strong> do I mean by who am I?</li>
</ul><br>
<p class="quote">
"Apparently they've turned into a bowl of petunias... and a very surprised-looking whale."</p>
<p class="quote" id="quote-author">Ford Prefect about the missiles</p>
</section><br><br>
<p><strong>If you want to know more about this fantastic creature check this <a id="tribute-link" href="https://hitchhikers.fandom.com/wiki/Magrathean_sperm_whale" target="_blank">Hitchhiker's Guide to the Galaxy Fandom Wiki entry</a>.</strong></p>
</main>
</body>
CSS
body {
background-color: #B5C6F5;
font-family: Inconsolata;
}
main {
max-width: 80%;
margin: 0 auto;
text-align: center;
}
header {
width: 50%;
margin: 0 auto;
}
#img-div {
height: 500px;
}
#image {
max-width:100%;
margin: auto;
height: auto;
display: block;
object-fit: cover;
}
#image-caption {
width: 50%;
margin: 0 auto;
}
#tribute-info {
width: 30%;
text-align: left;
margin: 0 auto;
}
.quote {
width: 100%;
font-style: italic;
}
Please fell free to tell me if I should edit the question, I don't know which part of the code is relevant to get the answer. Thanks!