所有图像调整大小除外

时间:2017-08-18 08:36:06

标签: html css image responsive

我正在为自己建立一个网站作为一种简历。 事情进展顺利,但我确实有一个问题。

在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;
&#13;
&#13;

0 个答案:

没有答案