代码之家 › 专栏 › 技术社区 › Shantanu Tomar

将图像包裹在div元素内

codepen bootstrap-4 css html

Shantanu Tomar · 技术社区 · 7 年前

我有一个图像,我想完全包裹在里面 div 要素我有一些项目截图,我想用它们包装在div元素中 class portfolioImg . 无论我的项目图像的维度是什么,我都希望它能够完美地适合div元素。我正在使用Bootstrap4。谢谢 HTML:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<body>
  <div id="header" class="container-fluid sticky-top">
    <div class="row no-gutters">
      <div class="col-xl-8">
        <h3 id="myText">Shantanu Tomar</h3> </div>
      <div class="col-xl"><button class="btn btn-primary" id="bAboutMe"><a href="#portfolioHeading"></a>About Me</button></div>
      <div class="col-xl"><button class="btn btn-primary" id="bPortfolio">Portfolio</button></div>
      <div class="col-xl"><button class="btn btn-primary" id="bContactMe">Contact Me</button></div>
    </div>
  </div>
  <div id="textImage" class="container-fluid">
    <div class="row no-gutters">
      <div class="col-xl-9 text-center">
        <p>This is paragraph1</p>
        <p>This is paragraph2</p>
      </div>
      <div class="col-xl">
        <img class="img-thumbnail" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAoSAAAAJGUyOTJlZmQxLWRlMjMtNDcyNy05YWZkLTllYTg0ZWNlY2JiNw.jpg" alt="My Image"></img>
      </div>
    </div>
  </div>
  <h3 id="portfolioHeading" class="text-center">Portfolio</h3>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg portfolioImg"><img src="https://d1fhzurqmm0rwe.cloudfront.net/wp-content/uploads/2016/11/prepare-for-business-project.jpg" alt="Project 1" class="projectImg .img-fluid"></img>
      </div>
      <div class="col-lg portfolioImg">This is image 2</div>
    </div>
    <div class="row">
      <div class="col-lg portfolioImg">This is image 3</div>
      <div class="col-lg portfolioImg">This is image 4</div>
    </div>
    <div class="row">
      <div class="col-lg portfolioImg">This is image 5</div>
      <div class="col-lg portfolioImg">This is image 6</div>
    </div>
  </div>
  <h3 id="contactMe" class="text-center">Contact Me</h3>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg" id="form">
        <form action="/submit">
          <input style="text" placeholder="Enter your Name" class="formField">
          <input style="text" placeholder="Enter your Contact" class="formField">
          <input style="text" placeholder="Enter your Address" class="formField">
          <input style="text" placeholder="Enter your Password" class="formField">
          <button type="submit" class="btn formFieldButton btn-primary align-center">Submit</button>
        </form>
      </div>
      <div class="col-lg text-center" id="contacText">
        <p>This is some text</p>
      </div>
    </div>
  </div>
  <div class="container-fluid d-flex flex-row justify-content-center socialLinks">
    <div class="p-2">
      <a href="https://www.facebook.com/shantanu.tomar.5"><img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook profile" class="socImageLink rounded-circle"></img>
      </a>
    </div>
    <div class="p-2">
      <a href="https://www.facebook.com/shantanu.tomar.5"><img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook profile" class="socImageLink rounded-circle"></img>
      </a>
    </div>
    <div class="p-2">
      <a href="https://www.facebook.com/shantanu.tomar.5"><img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook profile" class="socImageLink rounded-circle"></img>
      </a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

CSS:

#header {
  background-color: #9e9e9e;
  padding: 0.5% 0.5% 0.5% 0.5%;
}
#myText {
  s: 2%;
}
#textImage {
  padding-top: 2%;
  padding-bottom: 2%;
  background-color: #aed581;
}
.portfolioImg {
  border: 1px solid;
  margin: 0.5% 0.5% 0.5% 0.5%;
}
#portfolioHeading {
  margin-top: 3%;
}
#form {
  padding: 5% 5% 5% 5%;
}
#contacText {
  padding: 5% 5% 5% 5%;
}
#contactMe {
  margin-top: 3%;
}
.btn {
  width: 120px;
}
.formField {
  margin-top: 1%;
  margin-bottom: 1%;
  width: 70%;
}
.formFieldButton {
  width: 40%;
}
.socialLinks {
  border: 2px blue solid;
}
.socImageLink {
  width: 40px;
  height: 40px;
}

JS:

$(document).ready(function() {
  $("body").addClass("container-fluid");
  $("#bPortfolio").click(function() {
    $("html, body").animate(
      {
        scrollTop: $("#portfolioHeading").offset().top
      },
      "slow"
    );
  });
  $("#bAboutMe").click(function() {
    $("html, body").animate(
      {
        scrollTop: $("body").offset().top
      },
      "slow"
    );
  });
  $("#bContactMe").click(function() {
    $("html, body").animate(
      {
        scrollTop: $("#contactMe").offset().top
      },
      "slow"
    );
  });
});

代码笔链接: https://codepen.io/shaan046/full/vWmVNY/

4 回复 | 直到 7 年前

Shashan Sooriyahetti 7 年前

您可以定义高度,

.portfolioImg{
  height:400px; 
}

您可以将图像宽度和高度属性设置为100%,

img{
 width:100%;
 height:100%
}

Ezzuddin 7 年前

试试这个

.portfolioImg img { 
   width:100%; 
}

Pushparaj 7 年前

.portfolioImg {
background:url('../imagepath/imagename') center center no-repeat;
background-size:cover;
height:100vh; or height:manual
}

Maulik 7 年前

.portfolioImg img{
    max-width: 100%;
    width: auto;
}