1
img.resize{
    width:200px; 
    height: auto;
}

<img class="img-circle" src="portfolio picture.png">

Both css and html codes. Still won't resize.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
J.M521
  • 23
  • 4
  • It doesn't work because the class on the img is "img-circle" and it doesn't match your css "resize" – partypete25 Nov 05 '15 at 03:23
  • Possible duplicate of [CSS Display an Image Resized and Cropped](http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped) – LearningProcess Nov 08 '16 at 05:24

3 Answers3

0

Here is the best way to control size while still maintaining proportion:

#your-img {
   height: auto; 
   width: auto; 
   max-width: 300px; 
   max-height: 300px;
}
LearningProcess
  • 607
  • 1
  • 8
  • 29
0

Make sure that the class name matches the name used in your CSS rule and make sure that the path to the image (in src is correct).

Otherwise, you are using the correct properties, see below for a working example in which I resize a 300px wide image down to 200px while maintaining the aspect ratio of the image.

img.resize {
  width: 200px;
  height: auto;
}
<img class="resize" src="http://placehold.it/300x150">
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
0

You have no class of .resize that is on your image, you are writing styling for something with the class of resize but the only class on your image is "img-circle"

.img-circle{
width:200px; 
height: auto;
}
<img class="img-circle" src="portfolio picture.png">

or:

img.resize{
width:200px; 
height: auto;
}
<img class="resize" src="portfolio picture.png">
RichG
  • 1
  • 1