The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.?

Viewed 141

This is my code -not wroking- ( #image contained within #img-div ) :

#image{
border-radius: 5px;
width: 80%;
height: 80%;
    margin-left: 10%;
margin-right: 10%;
margin-top: 60px;

border-radius: 25px;}






 #img-div {
background-color: #a9dce3;
width: 96%;
height: 600px;
margin-left:2%;
margin-right: 2%;
border-radius: 25px;}

my full code : https://codepen.io/jozzo/pen/dyVYQWP original task : https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

i will do appreciate it to receive some help

1 Answers

Try this...

#image{
    border-radius: 5px;
    width: 80%;
    max-width: 1440px;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 60px;
    border-radius: 25px;
}
Related