-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