如何使用简单的HTML和CSS调整图像大小

Question

I am trying to resize this responsive image with basic HTML and CSS. It seems as though no matter what I do, nothing will alter the size. Is there something preventing it from being a larger image? I'm teaching myself how to create a webpage and will accept any advice given! Thanks!

HTML

<ul id="gallery">
   <li>
      <a href="img/chicago.jpg">
        <img src="img/chicago.jpg" alt="">
      </a>
   </li>
</ul>

CSS

#gallery{
    margin:0;
    padding:0;
    list-style: none;
}

#gallery li {
    float: left;
    position: relative;
    left: 30%;
    width: 70%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;

}

Answer 1

The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.

Working Example

CSS:

img
{
    border:1px solid #000;
width:100%;/*adjust this value to your needs*/
max-width: 400px;/* so it wont get bigger and pixelated*/
height:auto;
}

HTML:

  <a href="img/chicago.jpg">
    <img src="img/chicago.jpg" alt="">
  </a>

Answer 2

img { width: 100% }

您需要设置图像的宽度。

Answer 3

Make sure that the CSS you are writing isn't overwritten by other CSS. If another CSS files that is loaded later changes the image-size, the CSS you wrote prior will have no effect