如何使网页上的图像适合最大宽度，而不会影响较小的图像？

I have a blog set-up for my website. Imagine there is a limited space for an article, and I want to define an area for there to be an image at the top of the articles that can never exceed a maximum width. What I have so far is basic CSS styling to define the max-width, etc. What I want to know is how can I control it so that smaller images do not get affected?

I.e. So if I have a space of 700px, images larger than 700px will get sized down but images smaller than 700px will stay the same and maybe be centered or whatever I wanted.

I looked around but couldn't find a way to word this that would yield results. If this can't be done through CSS, I also have PHP to work with if necessary.

Thanks for reading and any help!

Using pure CSS you can do this:

.post img {
  width: auto;
  height: auto;
  max-width: 700px;
  max-height: 1000px;
}

Note: this is IE8+, and other latest browsers. See: http://caniuse.com/#search=max-width

U may try % instead of px. This will automatically resizes the image. try to use % or am as it displays the same result on all screen sizes.

U can also use % above 100 this will enlarge the image size .

Regards !