在Chrome全屏模式下，圖片無法正確調整大小

Question

這是我的第一篇文章，所以請原諒我缺乏信息和事物的交流。

我正在處理的本網站上的圖片無法在chrome中正確調整大小； 最大窗口大小。 我看到圖像不想拉伸，但它們太大了。 我在Dreamweaver中構建了該站點，因此該站點顯示一切正常，但在chrome中不正確。

html img 1

<section class="intro">
    <img src="hglogo.jpg">  
</section>

CSS img 1

.intro img {    
width: 100%;
max-height: 100%;   
}

html img 2

<section id="bio">
        <ul class="img-list">
            <li>
                <img src="img/bg4.jpg"/>
                   <span class="text-content"><span><h2>Who Is Henry?</h2>
                     ...

CSS img 2

#bio img {
width: 100%;
max-height: 100%;
}

我將不勝感激任何感謝

Answer 1

代替這個：

#bio img {
  width: 100%;
  max-height: 100%;
}

更改為此：

#bio img {
  max-width: 100%;
  height:auto;
}

Answer 2

這是因為max-heigth: 100% 。 放置它會使圖像在其高度尺寸的100％時停止縮放。 按height: auto替換height: auto或簡單地將其刪除以使其工作。