img help in html

hi all, I have a question, please help me, I have a img, like this,
<img src="dp.jpg" />
It will show like this

Now I Set this as
<img src="dp.jpg" style="width:160px;height:160px;" />
It will show as

But I Want To Show Like This,

Please Help In This case ..

 

Use <img src="dp.jpg" width="160" height="160" />

Jordan

 

Nothing Changed, Same Result ..

 

http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped

<div style="width: 141px; height: 176px; overflow: hidden">
  <img src="..." width="150" height="176">
</div>

Code (markup):

 

Just one thing -- if you want to show it cropped or resized, you should do so in the file, not on the page. Otherwise you are wasting bandwidth for pixels you aren't even showing!

 

Done Already ..

 

You could always download a free program to crop the image. I've used GIMP for a few years now and it's very similar to Photoshop, but it's free vs. a couple hundred dollars.

 

try this

<div style="width:160px;height:160px;overflow:hidden;">
<img src="dp.jpg" />
</div>

 

try this:

<div style="height: 160px; overflow: hidden; position: relative; width: 160px;">
<img src="dp.jpg" style="position: absolute; top: -20px;" />
</div>

HTML:

 

you should probably adjust the image in a program (such as Photoshop) first to make sure you are getting the correct aspect ratios so that you image doesn't become skewed.