Fixing an image into a <div> box

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:

  1. Never set fixed widths on most elements (unless position relative or pseudo elements) because this will create responsiveness to be overly complex.
  2. 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).
  3. 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.