new web developer and i am stuck with images alignment that i am trying to add to my page.I added the images just fine but i want the images to cover the whole space of the previous div i don't care about the aspect ratio but only alignment.
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
I want the images to cover whole blue space
change your HTML to this.
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
.full_height {
height: 250px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
Since the images are not of equal aspect ratios, it won't be possible to align them completely without distortion or cropping. With distortion, the following can be done
<!DOCTYPE html>
<html >
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg"class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
Maybe this solves your problem.
object-fit property is used to specify how an img should be resized to fit its container (https://www.w3schools.com/css/css3_object-fit.asp)
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
.fixHeight{
height: 100%;
width: 100%;
object-fit: cover;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
You can try the following. Hope to help, my friend :))
<style>
.img-thumbnail {
height: 100%;
}
</style
<div class="col-lg-4 col-sm-6 img-holder">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
</a>
</div>
Based from your initial code. You may just add a class e.g .img-holder with the following values:
.img-holder {
overflow: hidden;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
height: 250px;
}
To fill up the blue space you are referring to, you may just have the following value for the img tag.
.img-thumbnail {
max-height: 100%;
}
Related
I'm new to web development and I'm trying to create a responsive image gallery with Bootstrap Grid and flexbox but for some reason some of the images are not taking the full height of flex container.
What it looks like right now
* {
margin: 0px;
padding: 0px;
}
html,
body {
position: relative;
}
body {
overflow-y: auto;
min-height: 100vh;
}
.container {
margin-top: 20px;
}
.tile {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.2s;
}
.tile img:hover {
filter: brightness(50%);
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
class="img-one"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt=""
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
alt=""
class="img-two"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
alt=""
class="img-three"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
alt=""
class="img-four"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
alt=""
class="img-five"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
alt=""
class="img-six"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
alt=""
class="img-seven"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
alt=""
class="img-eight"
/>
</a>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
What should I do so that all images are of the same height, alternatively occupy full height of the flex container?
Add height:100%on a tag
.tile a{
height:100%;
}
* {
margin: 0px;
padding: 0px;
}
html,
body {
position: relative;
}
body {
overflow-y: auto;
min-height: 100vh;
}
.container {
margin-top: 20px;
}
.tile {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.tile a{
height:100%;
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.2s;
}
.tile img:hover {
filter: brightness(50%);
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
class="img-one"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt=""
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
alt=""
class="img-two"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
alt=""
class="img-three"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
alt=""
class="img-four"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
alt=""
class="img-five"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
alt=""
class="img-six"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
alt=""
class="img-seven"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
alt=""
class="img-eight"
/>
</a>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
You need to add .tile .picture { height and width inherit } and you can add same for .tile img { height and width: inherit } it will work. I've also created demo for you.
* {
margin: 0px;
padding: 0px;
}
html,
body {
position: relative;
}
body {
overflow-y: auto;
min-height: 100vh;
}
.container {
margin-top: 20px;
}
.tile {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.tile .picture {
height: inherit;
width: inherit;
}
.tile img {
width: inherit;
height: inherit;
object-fit: cover;
transition: all 0.2s;
}
.tile img:hover {
filter: brightness(50%);
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
class="img-one"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt=""
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
alt=""
class="img-two"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
alt=""
class="img-three"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
alt=""
class="img-four"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
alt=""
class="img-five"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
alt=""
class="img-six"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
alt=""
class="img-seven"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
alt=""
class="img-eight"
/>
</a>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
You could use just heigh 100% including 'a' tag with 'title' parent.
* {
margin: 0px;
padding: 0px;
}
html,
body {
position: relative;
}
body {
overflow-y: auto;
min-height: 100vh;
}
.container {
margin-top: 20px;
}
.tile , a{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.2s;
}
.tile img:hover {
filter: brightness(50%);
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
class="img-one"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt=""
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
alt=""
class="img-two"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
alt=""
class="img-three"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
alt=""
class="img-four"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
alt=""
class="img-five"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
alt=""
class="img-six"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
alt=""
class="img-seven"
/>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="tile">
<a class="picture" href="#">
<img
src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
alt=""
class="img-eight"
/>
</a>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
I have a website I'm trying to emulate and I can't seem to get the grid layout to match the site.
This is the site: https://www.khalidmohtaseb.com/
Here is my code
body {
margin-top: 75px;
/* 50px is the height of the navbar - change this if the navbarn height changes */
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item {
margin-bottom: 1px;
margin-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
footer {
margin: 50px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Portfolio</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="css/4-col-portfolio.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300"">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
</div>
<hr>
</div>
<!-- /.container -->
<div class="container">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Company 2021</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
I think my CSS is incomplete. I don't think I'm far but maybe I am, I love the way that site resizes the images to keep it's shape and 3 column setup until it goes really small, then it's a two column, then one for mobile.
I have a problem I want my pictures align like this:
and also it should be responsive but I cant achieve that help needed
Here is my source code:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#img-one {
float: right;
}
#img-three {
float: right;
}
</style>
</head>
<body>
<div id="Image-Section">
<div id="img-one">
<img src="one.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-two">
<img src="two.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-three">
<img src="three.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-four">
<img src="four.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I have aligned my picture using bootstrap and css and it is also responsive but its messing
You can try this, just instead of changing padding in css like i did you should change it in bootstrap customize
Demo: https://jsfiddle.net/2Lzo9vfc/173/
EDIT: Button https://jsfiddle.net/2Lzo9vfc/175/
HTML
<div class="container text-center">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
</div>
</div>
CSS
.col-sm-6 {
padding-left: 0;
padding-right: 0;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#img-one {
float: right;
}
#img-three {
float: right;
}
.img-xxx{
width: 631px !important;
height: 390px !important;
}
</style>
</head>
<body>
<div id="Image-Section">
<div class="row">
<div id="" class="col-sm-5">
<img src="images/logo.png" alt="Image" class="img-responsive img-xxx" >
</div>
<div id="img-two" class="col-sm-5">
<img src="images/man1.jpg" alt="Image" class="img-responsive img-xxx">
</div>
</div>
<div class="row">
<div id="" class="col-sm-5">
<img src="images/man2.jpg" alt="Image" class="img-responsive img-xxx">
</div>
<div id="img-four" class="col-sm-5">
<img src="images/man3.jpg" alt="Image" class="img-responsive img-xxx">
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
try this
I would like to align images in my code to the right, so that I have to boxes, in two rows both aligned to their sides, left and right With text and links under them, I tried alot of Things amongs others, float, but it never worked without some problem
this is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>Marko's portfolio</title>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive logo" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Name</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr class="line">
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="img-responsive picture" alt="Responsive image" src="images/ideja.jpg">
</div>
</div>
<div class="row text-center">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row text-thin text-center">
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive" alt="Responsive image" data-toggle="modal" data-target="#project1">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive" alt="Responsive image">
<h3>Appify</h3>
<p>Link to project</p>
</div>
</div>
<div class="row text-thin text-center">
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive center-block" alt="Responsive image">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive center-block" alt="Responsive image">
<h3>Appify</h3>
<p>Link to project</p>
</div>
</div>
</div>
and this is css
body { font-family: 'Fredericka the Great', cursive;
}
.display {}
.text-thin{font-size: 14px;
}
.line {border-top-width:0px;height:2px;background-color:rgb(42,35,35);
}
.logo { margin-top:20px;
}
.picture { width:1440px; height:500px;}
Thank you!
you can use margin-left with % like so :
.logo {
margin-top:20px;
margin-left: 40%;
}
for the other images :
.col-md-6 img {
margin-left: 10%;
}
edit regard to your comment you want the image to fit the hole size of the container , so you do like follow :
.col-md-6 img {
width: 100%;
height: 100%;
}
Live demo
I think you should apply a clearfix or just precise overflow of box and set img float right and text in an container float left like:
<div class="col-md-6 clearfix project">
<img src="http://placehold.it/555x300" alt="Responsive image">
<div class="description">
<h3>Appify</h3>
<p>Link to project</p>
</div>
</div>
And css:
.project {
overflow: hidden;
}
.project .description {
float: left;
}
.description {
float: left;
}
I am having some problems creating this layout:
1: I want to keep the grid layout no matter the size of images that will be dynamicaly generated.
2: Images should keep their aspect ratio (if possible , crop them),
Demo.
This is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/450x450" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x250" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/1350x500" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
</div>
</body>
</html>
CSS
.thumbnail {
overflow: hidden;
}
Your grid lacks the use of multiple rows. Each row needs exactly 12 columns. I added the missing two rows:
http://jsbin.com/cekojaxu/1/