Html photo gallery - remove space

up vote
0
down vote

favorite

I have a photo gallery in HTML / CSS and I have a space between 2 photos. I want the space to be like in photo (in left)

.portfolio-img {

  width: 45%;

  height: 100%;

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

Check Image

edited 7 hours ago

mplungjan

85.4k20120180

asked 7 hours ago

Ciuca Cristi

it is not clear what you want - perhaps you mean something like masonry.desandro.com
– mplungjan
7 hours ago

Please edit the snippet I made and add images from lorempixel.com or similar
– mplungjan
7 hours ago

Have a look at codepen.io/jensimmons/pen/XdBxav
– George
7 hours ago

add a comment |

up vote
0
down vote

favorite

I have a photo gallery in HTML / CSS and I have a space between 2 photos. I want the space to be like in photo (in left)

.portfolio-img {

  width: 45%;

  height: 100%;

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

Check Image

edited 7 hours ago

mplungjan

85.4k20120180

asked 7 hours ago

Ciuca Cristi

it is not clear what you want - perhaps you mean something like masonry.desandro.com
– mplungjan
7 hours ago

Please edit the snippet I made and add images from lorempixel.com or similar
– mplungjan
7 hours ago

Have a look at codepen.io/jensimmons/pen/XdBxav
– George
7 hours ago

add a comment |

up vote
0
down vote

favorite

I have a photo gallery in HTML / CSS and I have a space between 2 photos. I want the space to be like in photo (in left)

.portfolio-img {

  width: 45%;

  height: 100%;

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

Check Image

edited 7 hours ago

mplungjan

85.4k20120180

asked 7 hours ago

Ciuca Cristi

I have a photo gallery in HTML / CSS and I have a space between 2 photos. I want the space to be like in photo (in left)

.portfolio-img {

  width: 45%;

  height: 100%;

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

Check Image

.portfolio-img {

  width: 45%;

  height: 100%;

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

.portfolio-img {

  width: 45%;

  height: 100%;

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

html css image gallery responsive

edited 7 hours ago

mplungjan

85.4k20120180

asked 7 hours ago

Ciuca Cristi

edited 7 hours ago

mplungjan

85.4k20120180

asked 7 hours ago

Ciuca Cristi

edited 7 hours ago

mplungjan

85.4k20120180

edited 7 hours ago

mplungjan

85.4k20120180

edited 7 hours ago

mplungjan

85.4k20120180

asked 7 hours ago

Ciuca Cristi

asked 7 hours ago

Ciuca Cristi

asked 7 hours ago

Ciuca Cristi

it is not clear what you want - perhaps you mean something like masonry.desandro.com
– mplungjan
7 hours ago

Please edit the snippet I made and add images from lorempixel.com or similar
– mplungjan
7 hours ago

Have a look at codepen.io/jensimmons/pen/XdBxav
– George
7 hours ago

add a comment |

it is not clear what you want - perhaps you mean something like masonry.desandro.com
– mplungjan
7 hours ago

Please edit the snippet I made and add images from lorempixel.com or similar
– mplungjan
7 hours ago

Have a look at codepen.io/jensimmons/pen/XdBxav
– George
7 hours ago

it is not clear what you want - perhaps you mean something like masonry.desandro.com
– mplungjan
7 hours ago

Please edit the snippet I made and add images from lorempixel.com or similar
– mplungjan
7 hours ago

Have a look at codepen.io/jensimmons/pen/XdBxav
– George
7 hours ago

add a comment |

5 Answers
5

active

oldest

votes

up vote
0
down vote

You can use

.porfolio-img {

    width: 45%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}

background-size: cover will ensure that the source image covers the area of the img tag.

answered 7 hours ago

Riley Steele Parsons

1013

add a comment |

up vote
0
down vote

You are giving height in % please change it to px

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

answered 6 hours ago

mohxn ayaz

New contributor

add a comment |

up vote
0
down vote

I want something like that:
image

answered 6 hours ago

Ciuca Cristi

codepen.io/anon/pen/RqoxEJ
– Ciuca Cristi
5 hours ago

add a comment |

up vote
0
down vote

There is a nice example in w3school website

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

In summary you use display flex and divide the images into columns

This is the result for your case

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

answered 4 hours ago

Eric Marcelino

29122

add a comment |

up vote
0
down vote

I succeeded with this codepen.io/ms_yogi/pen/zpEXba. Thank you all!

answered 4 hours ago

Ciuca Cristi

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265432%2fhtml-photo-gallery-remove-space%23new-answer', 'question_page');
}
);

Post as a guest

Name

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

up vote
0
down vote

You can use

.porfolio-img {

    width: 45%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}

background-size: cover will ensure that the source image covers the area of the img tag.

answered 7 hours ago

Riley Steele Parsons

1013

add a comment |

up vote
0
down vote

You can use

.porfolio-img {

    width: 45%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}

background-size: cover will ensure that the source image covers the area of the img tag.

answered 7 hours ago

Riley Steele Parsons

1013

add a comment |

up vote
0
down vote

You can use

.porfolio-img {

    width: 45%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}

background-size: cover will ensure that the source image covers the area of the img tag.

answered 7 hours ago

Riley Steele Parsons

1013

You can use

.porfolio-img {

    width: 45%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}

background-size: cover will ensure that the source image covers the area of the img tag.

answered 7 hours ago

Riley Steele Parsons

1013

answered 7 hours ago

Riley Steele Parsons

1013

answered 7 hours ago

Riley Steele Parsons

1013

answered 7 hours ago

Riley Steele Parsons

1013

add a comment |

up vote
0
down vote

You are giving height in % please change it to px

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

answered 6 hours ago

mohxn ayaz

New contributor

add a comment |

up vote
0
down vote

You are giving height in % please change it to px

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

answered 6 hours ago

mohxn ayaz

New contributor

add a comment |

up vote
0
down vote

You are giving height in % please change it to px

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

answered 6 hours ago

mohxn ayaz

New contributor

You are giving height in % please change it to px

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

.portfolio-img {

  width: 45%;

  height: 300px; /* ---> give height it as you want */

  margin-top: 2rem;

  margin-left: 1rem;

}

<div class="container">

  <div class="row">





    <img src="images/img3.jpg" class="portfolio-img">

    <img src="images/img1.jpg" class="portfolio-img">

    <img src="images/img2.jpg" class="portfolio-img">

    <img src="images/img4.jpg" class="portfolio-img">



  </div>

</div>

answered 6 hours ago

mohxn ayaz

New contributor

answered 6 hours ago

mohxn ayaz

New contributor

answered 6 hours ago

mohxn ayaz

answered 6 hours ago

mohxn ayaz

New contributor

mohxn ayaz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

up vote
0
down vote

I want something like that:
image

answered 6 hours ago

Ciuca Cristi

codepen.io/anon/pen/RqoxEJ
– Ciuca Cristi
5 hours ago

add a comment |

up vote
0
down vote

I want something like that:
image

answered 6 hours ago

Ciuca Cristi

codepen.io/anon/pen/RqoxEJ
– Ciuca Cristi
5 hours ago

add a comment |

up vote
0
down vote

I want something like that:
image

answered 6 hours ago

Ciuca Cristi

I want something like that:
image

answered 6 hours ago

Ciuca Cristi

answered 6 hours ago

Ciuca Cristi

answered 6 hours ago

Ciuca Cristi

answered 6 hours ago

Ciuca Cristi

codepen.io/anon/pen/RqoxEJ
– Ciuca Cristi
5 hours ago

add a comment |

codepen.io/anon/pen/RqoxEJ
– Ciuca Cristi
5 hours ago

codepen.io/anon/pen/RqoxEJ
– Ciuca Cristi
5 hours ago

add a comment |

up vote
0
down vote

There is a nice example in w3school website

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

In summary you use display flex and divide the images into columns

This is the result for your case

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

answered 4 hours ago

Eric Marcelino

29122

add a comment |

up vote
0
down vote

There is a nice example in w3school website

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

In summary you use display flex and divide the images into columns

This is the result for your case

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

answered 4 hours ago

Eric Marcelino

29122

add a comment |

up vote
0
down vote

There is a nice example in w3school website

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

In summary you use display flex and divide the images into columns

This is the result for your case

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

answered 4 hours ago

Eric Marcelino

29122

There is a nice example in w3school website

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

In summary you use display flex and divide the images into columns

This is the result for your case

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

.container {

  display: flex;

  flex-wrap: wrap;

}

.row {

  flex: 50%;

  max-width: 50%;

}

.portfolio-img {

  width:100%;

  vertical-align: middle;

}

<div class="container">

  <div class="row">

    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">

  </div>

  <div class="row">

    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">

    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">

  </div>

</div>

answered 4 hours ago

Eric Marcelino

29122

answered 4 hours ago

Eric Marcelino

29122

answered 4 hours ago

Eric Marcelino

29122

answered 4 hours ago

Eric Marcelino

29122

add a comment |

up vote
0
down vote

I succeeded with this codepen.io/ms_yogi/pen/zpEXba. Thank you all!

answered 4 hours ago

Ciuca Cristi

add a comment |

up vote
0
down vote

I succeeded with this codepen.io/ms_yogi/pen/zpEXba. Thank you all!

answered 4 hours ago

Ciuca Cristi

add a comment |

up vote
0
down vote

I succeeded with this codepen.io/ms_yogi/pen/zpEXba. Thank you all!

answered 4 hours ago

Ciuca Cristi

I succeeded with this codepen.io/ms_yogi/pen/zpEXba. Thank you all!

answered 4 hours ago

Ciuca Cristi

answered 4 hours ago

Ciuca Cristi

answered 4 hours ago

Ciuca Cristi

answered 4 hours ago

Ciuca Cristi

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky