Imgはブラウザでサイズ変更されません

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