圖片不會調整大小與瀏覽器

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