我正在为自己建立一个网站作为一种简历。 事情进展顺利,但我确实有一个问题。
在CSS中,我将目标锁定在jumbotron中的所有图像,但是,当我使浏览器变小时,其中一个图像不会调整大小,其余图像则会。我不知道为什么在经过搜索和尝试后,我想也许你们可以帮助我在这里。
调整大小是社交媒体和联系人的图标。 什么不调整大小,是catcolor.img(是的,这是我在亚速尔群岛拿着一只猫的照片,非常可爱,而且都是这样)。
.jumbotron {
/*background: url('image.jpg') no-repeat center center;
background-size: cover;*/
height: 400px;
background-color: transparent;
margin-left: 7%;
margin-right: 7%;
}
.jumbotron img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
border: 4px solid white;
max-width: 100%;
height: auto;
}
.jumbotron h1, p {
color: black;
}
.jumbotron p {
font-size: 18px;
margin-top: 40px;
}
#nopadding {
padding-left: 0px;
}
.btn-default {
text-decoration: none;
margin-top: 15px;
background-color: #281A1F;
color: white;
font-size: 14px;
}
.btn-default:hover {
background-color: #5D6263;
color: white;
}
.jumbotron li {
list-style: none;
margin: 13px;
}
.jumbotron ul {
padding: 0px;
}
.contact img {
border: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1>TITLE</h1>
<p id="nopadding">SUBTITEL</p>
<a href="#" class="btn btn-default">Go to latest creation</a>
</div>
<div class="col-md-3">
<img src="img/catcolor.jpg">
</div>
<div class="col-md-1">
<ul class="contact">
<li><a href="#" target="_blank"><img src="img/usedicons/linkedin.png" height="35" width="35"></a></li>
<li><a href="#" target="_blank"><img src="img/usedicons/instagram.png" height="35" width="35"></a></li>
<li><a href="#" target="_blank"><img src="img/usedicons/wordpress.png" height="35" width="35"></a></li>
<li><a href="#" target="_blank"><img src="img/usedicons/pinterest.png" height="35" width="35"></a></li>
<li><a href="#" target="_blank"><img src="img/usedicons/flickr.png" height="35" width="35"></a></li>
<li><a href="#" target="_blank"><img src="img/usedicons/gmail.png" height="35" width="35"></a></li>
</ul>
</div>
</div>
</div>
</div>
&#13;