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

我试图用基本的HTML和CSS调整这个响应图像的大小。似乎无论我做什么，都不会改变尺寸。是否有什么东西阻止它成为更大的图像？我正在自学如何创建网页，并将接受任何建议！谢谢

HTML

---

您需要设置图像的宽度。

css属性max width和max height工作得很好，但IE6和IE7都不支持。您可能希望在高度/宽度上使用此选项，以便不会意外地放大图像。您只需要按比例限制最大高度/宽度

CSS:

HTML:

确保您正在编写的CSS没有被其他CSS覆盖。如果以后加载的另一个CSS文件更改了图像大小，那么您之前编写的CSS将无效

。。。图像没有延伸到其容器？

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

#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;

}

img { width: 100% }

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;
}

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