[英]Img doesn't resize with browser
因此,我的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-->
按全屏,否則您將無法解決我的問題。
設置#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;
}
用這個。 它將解決問題
img {max-width: 100%}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.