Img 不使用浏览器调整大小答案

【问题标题】：Img doesn't resize with browserImg 不使用浏览器调整大小
【发布时间】：2018-01-18 15:25:17
【问题描述】：

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

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

这是一个sn-p：

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

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

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

【问题讨论】：

标签： html css image resize

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用这个。会解决问题的

img {max-width: 100%}

【讨论】：