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

Question

我正在尝试使用基本的HTML和CSS调整此响应图像的大小。 似乎无论我做什么，都不会改变大小。 有什么阻止它变大的图像吗？ 我正在教自己如何创建网页，并且会接受任何建议！ 谢谢！

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

css属性的max-width和max-height效果很好，但是IE6不支持，我相信IE7。 您可能希望在高度/宽度上使用它，以免意外放大图像。 您只想按比例限制最大高度/宽度。

工作实例

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

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