如何使用簡單的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將無效。