How do i implement: User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap" rel="stylesheet">
    <title>Victor Stoholms Tribute page</title> 
</head>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

/* main rules */

body {
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: Lato, sans-serif;
}

/* header */

.navbar {
    position: relative;
    top: -7px;
    width: 100%;
    height: 120px;
    background: #3D444A;
    z-index: -4;
}

.navbar h2 {
    font-size: 1.5em;
}

.navbar h1 {
    position: relative;
    top: 10px;
    font-size: 2em;
}

.top-wrapper {
    position: relative;
    top: -20px;
    width: 100%;
    color: #fff;
    background: #2d99d8cb;
    z-index: -3;
}

.top-wrapper img {
    position: relative;
    top: 25px;
    margin-bottom: 50px;
    height: auto;
    width: 100%;
    max-width: 650px;
}

#img-caption {
    display: none;
}

/* main content */

.center-content {
    margin: auto;
    width: 650px;
}

.main-text-container p {
    font-family: Montserrat, sans-serif;
    background-color:#fff;
    width: 50%;
    position: relative;
    
    margin: auto;
    font-weight: normal;
    font-size: 1.1em;
    line-height: 3em;
}

.mid-container {
  background: #a4ccd8;
  color: #fff;
  width: 100%;
}

.mid-photo {
    position: relative;
    padding: 20px;
}

/* footer */

.footer-container {
    width: 100%;
    margin: 12em 2em;
}

.footer-container a {
    background: #00cc80;
    color: #fff;
    font-size: 1.4em;
    padding: 0.5em;
    position: relative;
    top: 10px;
}

.footer-container-items {
    position: relative;
    justify-content: center;
    top: -50px;
}

.footer-container h3 {
    font-size: 2.1em;
    position: relative;
    top: -20px;
}

<body>
    <div id="main">
        <header class="main-header top-wrapper" >
            <div class="empty-grey-nav-bar">
                <nav>
                    <div class="navbar">
                        <h1 id="title">Tribute page for Victor Stokholm</h1>
                        <h2>"How he made his way"</h2>
                    </div>
                </nav>
            </div>
            
            <div id="img-div">
                <img id="image" src="images/Top-photo.jpeg" alt="Photo of Victor Stokholm"> 
                    <div id="img-caption">Photo of Victor Stokholm</div>
            </div>
        </header>

        <div class="main-content-container" id="tribute-info">
            <div class="main-text-container">
                <div class="upper-text">               
                    <p>Ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><br>
                    <p>Ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><br>
                    <p>Ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><br>
                </div> 
                
                <div class="mid-grey-container">
                    <div class="mid-photo mid-container" id="2-img-div">
                        <img src="images/meal-pal.png" alt="Meal Plan Worksheet">
                    </div>
            </div>
                        
                <div class="under-text">
                    <p>dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><br>
                    <p>dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
            
        <footer>
            <div class="footer-container">
                <div class="footer-container-items">
                    <h3>Fell like investing?</h3>
                    <a class="learn-more" id="tribute-link" href="#" target="_blank">Learn more</a>
                </div>
            </div>
        </footer>
    </div>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>

Set the image to a block element, like display: block; and set a max-width of 100%. That should make it responsive.

2 Likes

thank you man, got it up and running now <3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).