0
Ich habe ein Bild, das ich komplett in div Element wrap umhüllen möchte. Ich habe Projekte Screenshots, die ich in div-Elemente mit class portfolioImg umbrechen möchte. Egal was die Dimensionen meines Projektbildes sind, ich möchte, dass es perfekt in div Elemente passt. Ich benutze Bootstrap4. Vielen Dank !! -Code-Details: HTML:Wrap Bild in einem Div-Element
<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"
);
});
});
Codepen-Link: https://codepen.io/shaan046/full/vWmVNY/
Danke !! Funktioniert gut :) –