-1
我正在嘗試調整左上角的圖標大小。我嘗試在css中使用resize，但在調整瀏覽器大小時不會改變其大小。但是，我的中間主圖像和底部的所有圖像都可以動態調整大小。請給我一些建議！謝謝:)無法動態調整圖像大小
這是HTML：
.icon{ \t
\t \t display: inline-block;
\t \t position:absolute;
\t left:0;
\t margin-left:8px;
\t \t }
.icon img{
\t \t max-width: 45%;
\t \t height: auto;
\t resize: both;
\t vertical-align: center;
\t top:0px;
\t left:20px;
\t \t }
.header-text{ \t
\t \t display: inline-block;
\t right:0;
\t margin-right:8px;
\t position:absolute;
\t height:900px;
\t \t }
#name{color: #707070;
margin-top: 40px;
margin-bottom: 5px;
font-size: 2.2vw;}
#ninja{
\t color: #A8A8A8;
\t margin-top: 1px;
\t font-size: 2vw;
\t position:absolute;
\t top:100px;
\t right:0px;
\t }
.line {
position: absolute;
top: 155px;
left: 10px;
height: 8px;
width: 100%;
background-color: #FFCCFF;
\t }
#nz{
position: relative;
top: 155px;
left: 7.25px;
\t }
#feature{
\t position: relative;
top: 145px;
left: 7.25px;
\t }
#feature h1{
\t color: #707070;
\t font-size: 3.2vw;
}
table{
\t table-layout : fixed
}
#baby-seal{
\t margin-top: 1px;
\t margin-bottom: 1px;
\t font-size: 3.2vw;
}
#wiki-link{
\t margin-top: 1px;
}
#wiki-link a{
\t font-size: 2.2vw;
}
.work{
\t display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/Users/yianlai/Desktop/UDACITY-PROJECT1/project1.css'>
</head>
<body>
\t \t \t <div class='icon' align='left'>
\t \t \t \t <img src='http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg'>
\t \t \t </div>
\t
\t <div class='header-text'>
\t \t <div align='right'id="name"><h1>Baby Seal</h1></div>
\t \t \t <div align='right' id="ninja">NiNJA</div>
\t </div>
\t \t \t <div class="line"></div>
\t \t <div id="nz" align="center"><img src='http://www.wallcoo.net/nature/new_zealand_landscape/images/A%20melting%20glacier%20in%20New%20Zealand.jpg' style="width: 100%"></div>
\t \t <div id="feature">
\t \t \t <h1>FEATURE WORK</h1>
\t \t \t <table style="width:100%">
\t \t \t \t <tr>
\t \t \t \t \t <td>
\t \t \t \t \t \t <div class="work">
\t \t \t \t \t \t <div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
\t \t \t \t \t \t <div id="baby-seal"><h1>Baby Seal</h1></div>
\t \t \t \t \t \t <div id="wiki-link"><a href="https://en.wikipedia.org/wiki/Seal">https://en.wikipedia.org/wiki/Seal</a></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </td>
\t \t \t \t \t <td>
\t \t \t \t \t \t <div class="work">
\t \t \t \t \t \t <div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
\t \t \t \t \t \t <div id="baby-seal"><h1>Baby Seal</h1></div>
\t \t \t \t \t \t <div id="wiki-link"><a href="https://en.wikipedia.org/wiki/Seal">https://en.wikipedia.org/wiki/Seal</a></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </td>
\t \t \t \t \t <td>
\t \t \t \t \t \t <div class="work">
\t \t \t \t \t \t <div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
\t \t \t \t \t \t <div id="baby-seal"><h1>Baby Seal</h1></div>
\t \t \t \t \t \t <div id="wiki-link"><a href="https://en.wikipedia.org/wiki/Seal">https://en.wikipedia.org/wiki/Seal</a></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t </table>
\t \t </div>
</body>
</html>
您可以添加CSS媒體查詢併爲每個查詢設置圖片的大小 – Spade
我不認爲這是因爲它不需要重新調整大小。只有當它不適合其容器'.icon'時纔會調整大小。如果你想調整大小，你必須給'.icon'寬度，就像'width：18％;'然後用'max-width：100％;'設置'.icon img'。看到[fiddle]（https://jsfiddle.net/50514jhr/） – zgood