Question

这是我的第一篇文章，所以请原谅我缺乏信息和事情。

我正在处理的this网站上的图片未在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，或者只是将其删除以使其正常工作。

图像未在Chrome全屏中正确调整大小

2 个答案: