I’ve been trying to fix an image into a div box, trying to resize it to fix into the box
here is my html markup
<div id="pricing">
<div class="pricing">
<div class="top"><h2>Original Bluedio UFO</h2></div>
<div class="bluedio"><img alt="Original Bluedio UFO" src="https://imgur.com/TIa7sye.jpg"></div>
<div class="bottom"><h2>$63.9</h2></div>
</div>
</div>
here is my style sheet
#pricing{
width: 100%;
background-color: black;
padding: 0px 80px;
}
.pricing{
width: 20%;
border: 1px solid white;
text-align: center;
height: 350px;
}
.pricing img{
width: 100%;
height: 300px;
}
please i need help on how to fix this.
You can set width: px height: px for the img
I did, it kept going out of the box.
I’ve got a couple of tips, I hope this helps.
Code Pen: Code Pen Example
Suggestions:
- Never set fixed widths on most elements (unless position relative or pseudo elements) because this will create responsiveness to be overly complex.
- Set max-width on images to ensure they’ll stay inside they’re container element (with the exception of select position absolute and float scenarios).
- Also I would suggest when using selectors, creating more modular name convention. This will allow you write more reusable code, allow your code to be much more readable from a developer perspective and allow you to write less complex selector queries.
Looks good though, keep going you’re on the right path. I hope this can help for this project and ones in future.