CODEWITHSUNDEEP
htmlcss
RobChem
RobChem

Reputation: 101

How can you make pictures align evenly on a gallery page (i.e tiles)?

Im trying to make pictures align evenly inside a div with the div width dependent on the picture width so it can adapt to wider and slimmer screens. How can this be done? So far my attempt is:

<style>
.pictures {
width: auto;
border-radius: 30px 0 30px 0;
background: white;
text-align: justify;
}
img {
border-radius: 30px 0 30px 0;
border-style: solid;
border-width: 0 1px 3px 0;
border-color: rgba(0,0,0,1);
height: 199px;
margin: 15px;
}
</style>

...(some code that is superfluous with respect to the question)...

<article>
<div class="pictures">
<img src="images/001.jpg">
<img src="images/002.jpg">
<img src="images/003.jpg">
<img src="images/004.jpg">
<img src="images/005.jpg">
</article>
</body>

The "width: auto;" seems to do nothing. Is there a better way of trying to make the div fit snug with its contents?

Upvotes: 0

Views: 200

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You could trigger text-align:justify on every line adding an extra invisible line a the end. DEMO 

.pictures {
    width: auto;
    border-radius: 30px 0 30px 0;
    background: white;
    text-align: justify;
}
.pictures:after {
    content:'';
    display:inline-block;
    width:100%;
}

use display:flex properties. DEMO

.pictures {
  width: auto;
  border-radius: 30px 0 30px 0;
  background: white;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

Both render will not align the last line as column would do.

See the use of column properties: DEMO

.pictures {
width: 100%;
border-radius: 30px 0 30px 0;
background: white;
text-align: justify;
column-width:250px;/* add prefix if needed */
}

Upvotes: 1

Martijn
Martijn

Reputation: 16123

You can do this very easy by using the image as background:

<div style="background-image: url('image1.jpg');"></div>
<div style="background-image: url('image2.jpg');"></div>
<div style="background-image: url('image3.jpg');"></div>

div{
    background-position: center center; /* IE8 support, not required */
    background-position: cover;
    background-size: 100%;
}

Upvotes: 0

Related Questions