Question

我正在尝试调整左上角的图标。我尝试在css中使用resize，但是当我调整浏览器大小时它不会改变它的大小。但是，我的中间主图像和底部的所有图像都可以动态调整大小。请给我一些建议！谢谢:)

这是html：

.icon{	
		display: inline-block; 
		position:absolute;    
    	left:0;
    	margin-left:8px; 

		}

.icon img{
		max-width: 45%;
		height: auto;
	    resize: both;
	    vertical-align: center;
	    top:0px;
	    left:20px;

		}

.header-text{	
		display: inline-block;
    	right:0;
    	margin-right:8px;
    	position:absolute; 
    	height:900px;

    		}


#name{color: #707070;

margin-top: 40px;
margin-bottom: 5px;
font-size: 2.2vw;}

#ninja{
	color: #A8A8A8;
	margin-top: 1px;
	font-size: 2vw;
	position:absolute;
	top:100px;
	right:0px;

	}

.line {
    position: absolute;
    top: 155px;
    left: 10px;
    height: 8px;
    width: 100%;
    background-color: #FFCCFF;
	}

#nz{
    position: relative;
    top: 155px;
    left: 7.25px;
	}

#feature{
	position: relative;
    top: 145px;
    left: 7.25px;
	}

#feature h1{
	color: #707070;
	font-size: 3.2vw;
}

table{
	table-layout : fixed
}

#baby-seal{
	margin-top: 1px;
	margin-bottom: 1px;
	font-size: 3.2vw;
}

#wiki-link{
	margin-top: 1px;
}

#wiki-link a{
	font-size: 2.2vw;
}

.work{
	display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/Users/yianlai/Desktop/UDACITY-PROJECT1/project1.css'>
</head>
<body>


			<div class='icon' align='left'>
				<img  src='http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg'>
			</div>
	        
	        <div class='header-text'>
		        <div align='right'id="name"><h1>Baby Seal</h1></div>
			    <div align='right' id="ninja">NiNJA</div>
	        </div>
            
			<div class="line"></div>

		    <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>

		    <div id="feature">
		    	<h1>FEATURE WORK</h1>

		    	<table style="width:100%">

		    		<tr>
		    			<td>

				    		<div class="work">
				    		<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
				    		<div id="baby-seal"><h1>Baby Seal</h1></div>
				    		<div id="wiki-link"><a href="https://en.wikipedia.org/wiki/Seal">https://en.wikipedia.org/wiki/Seal</a></div>
		    				</div>


		    			</td>


		    			<td>

				    		<div class="work">
				    		<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
				    		<div id="baby-seal"><h1>Baby Seal</h1></div>
				    		<div id="wiki-link"><a href="https://en.wikipedia.org/wiki/Seal">https://en.wikipedia.org/wiki/Seal</a></div>
		    				</div>


		    			</td>

		    			<td>

				    		<div class="work">
				    		<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
				    		<div id="baby-seal"><h1>Baby Seal</h1></div>
				    		<div id="wiki-link"><a href="https://en.wikipedia.org/wiki/Seal">https://en.wikipedia.org/wiki/Seal</a></div>
		    				</div>


		    			</td>
		    		</tr>


		    	</table>


		    </div>



</body>
</html>

Answer 1

我会从<img>容器中移除.icon并将其设置为背景图片。

.icon的更新后的css就是这样：

.icon{  
    display: inline-block; 
    position:absolute;    
    left:0;
    margin-left:8px; 
    height:150px;
    width:18%; 
    background:url(http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg) no-repeat;
    background-size:contain;
    background-position:center center;
}

当然，您可以将高度和宽度设置为您想要的任何值。这样，图标将随窗口调整大小并始终保持在中心位置。

有关演示，请参阅此fiddle。（调整框架窗口大小以查看其运行情况）

无法动态调整图像大小

1 个答案: