Img 不会随浏览器调整大小

Question

所以我的 img 有调整大小的问题。它只是保持相同的大小。如果您发现错误，请告知。谢谢你。

这是代码的 link，因此您可以尝试您的建议或其他内容：https://jsfiddle.net/pnfaps7L/2/

这是一个片段：

*::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;
}

<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-->

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

Answer 1

用这个。它会解决问题

img {max-width: 100%}

Answer 2

设置#fav的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

Img 不会随浏览器调整大小

Img doesn't resize with browser

html

css

resize

image