Img没有使用浏览器调整大小

Question

所以我的*::selection { background: #333; } *::-moz-selection { background: #333; } body { background-color: #fff; font-family: 'Hind', sans-serif; } * { padding: 0; margin: 0; } #favul { list-style-type: decimal; font-family: 'Josefin Sans', sans-serif; padding-left: 8vw; margin: 6.5vh auto; } #favul>li { margin: 1vw 0; } #favtit { text-align: center; } #fav { border: 1px solid #000; font-size: 48px; padding: 15px; width: 1000px; height: 90vh; overflow: hidden; background-color: #0A4366; position: absolute; } #images { position: absolute; bottom: 0%; left: 0%; } #images>img { max-width: 100%; height: auto; width: auto\9; }出现了调整大小问题。它只是保持相同的大小。如果您发现错误请告诉我。谢谢。

以下是代码的链接，您可以尝试使用以下建议：https://jsfiddle.net/pnfaps7L/2/

这是一个片段：

<div id="fav">
    
    <p id="favtit">My Favorite Characters</p>
    
    <ul id="favul">
      <li>The Flash</li>
      <li>Batman</li>
      <li>Green Arrow</li>
      <li>Dr. Manhattan</li>
    </ul><!--#favul-->
    
    <div id="images">
      <img src="http://nof.bof.nu/dccomics/characters.jpeg" alt="characters" />
    </div><!--#images-->    
    
  </div><!--#fav-->

String[] aList = new String[0];

按全屏键，否则你不会遇到我的问题。

Answer 1

设置#fav＆＃39; width:100%;和max-width: 1000px;，它会根据屏幕尺寸调整宽度。

#fav {
    border: 1px solid #000;
    font-size: 48px;
    padding: 15px;
    max-width: 1000px;
    width:100%;
    height: 90vh;
    overflow: hidden;
    background-color: #0A4366;
    position: absolute;
}

Updated fiddle

Answer 2

使用它。它将解决问题

img {max-width: 100%}