图片不会调整大小与浏览器

Question

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

这里是一个链接的代码，所以你可以尝试你的建议或任何：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\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-->

按全屏或以其他方式你不会得到我的问题。

Answer 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

Answer 2

使用此。这将解决这个问题

img {max-width: 100%}