How do I go about resizing an image for a banner?
Hello, I currently am trying to resize an image for a banner, I just want to crop it, not stretch the image. I can seem to get the width right, but not the height. I tried adjusting the height with the "height" property, but it also seems to just resize the image totally down and therefore the width goes down automatically. here's what I have ’’’ #banner{
height:60vh;
width: 100%;
padding-top: 1px;
background-repeat: no-repeat;
position: relative;
display: inline-block;
}
#banner img{
display: flex;
max-width: 100%;
height: auto;
background-position: center;
}’’’ for I have the html set up with a banner section ,and my image in that banner section. I did it like this so I can also set up text inside my banner as well as a button
height:60vh;
width: 100%;
padding-top: 1px;
background-repeat: no-repeat;
position: relative;
display: inline-block;
}
#banner img{
display: flex;
max-width: 100%;
height: auto;
background-position: center;
}’’’ for I have the html set up with a banner section ,and my image in that banner section. I did it like this so I can also set up text inside my banner as well as a button
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
