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

Question

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!

Answer 1

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