Mosaic of images HTML/CSS
To make a proper answer, I am first going to clarify the requirements :
- images all have the same aspect ratio : 3/2
- images shouldn't be cropped
- no space between images
- make a mosaic of images
You can have thousands of possibilities to display your images. I am going to make a simple layout that should show you the way to build your own.
Here is a FANCY FIDDLE of what you can achieve and here is what it looks like :
Code :
body, html {
width:100%;
margin:0;
padding:0;
}
#wrap {
width:984px;
height:492px;
}
.big_col, .medium_col, .small_col{
height:492px;
float:left;
}
img {
display:block;
margin:0;
padding:0;
border:none;
float:left;
}
.big_col {
width:328px;
}
.medium_col{
width:164px;
}
.small_col{
width:82px;
}
.big_img img {
width:328px;
height:492px
}
.medium_img img {
width:164px;
height:246px;
}
.small_img img {
width:82px;
height:123px;
}
<div id="wrap">
<div class="big_col">
<div class="small_img">
<img src="https://picsum.photos/id/241/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/147/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/258/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/237/328/492" alt="Sample Image" />
</div>
<div class="medium_img">
<img src="https://picsum.photos/id/356/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/254/328/492" alt="Sample Image" />
</div>
<div class="small_img">
<img src="https://picsum.photos/id/156/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/175/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/132/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/197/328/492" alt="Sample Image" />
</div>
</div>
<div class="big_col">
<img src="https://picsum.photos/328/492" alt="Sample Image" />
</div>
<div class="small_col small_img">
<img src="https://picsum.photos/id/210/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/152/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/142/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/189/328/492" alt="Sample Image" />
</div>
<div class="medium_col medium_img">
<img src="https://picsum.photos/id/254/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/111/328/492" alt="Sample Image" />
</div>
<div class="small_col small_img">
<img src="https://picsum.photos/id/198/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/201/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/286/328/492" alt="Sample Image" />
<img src="https://picsum.photos/id/145/328/492" alt="Sample Image" />
</div>
</div>
Responsive mosaic of images as backgrounds in CSS/HTML - borders and capture texts needed
write some CSS
.table {
display:table;
width:70%; }
.tablerow {
display:table-row;
}
.tablecell {
display:table-cell;
width:50%;
vertical-align:top;
}
.tablecell a div:not (.caption) {
position:relative;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
background: rgba(255,255,255,0.7);
padding: 5px;
color: #000;
border-radius: 2px;
line-height: 1.2;
}
#foto1 {
border-right:2px solid #fff;
}
#foto2 {
border-bottom:2px solid #fff;
}
<div class="table">
<div class="tablerow">
<div class="tablecell">
<a href="#">
<div id="foto1" style="padding-top:100%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c33/768d432/none/11314/UVTR/image_content_3669106_20180619165415.jpg) center no-repeat;background-size:auto, cover;">
<div class="caption">caption Text</div>
</div>
</a>
</div>
<div class="tablecell">
<a href="#">
<div id="foto2" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c0/768d432/none/11314/VMNM/180731ftv-carretera-corralejo-8melian_3847760_20180804162359.jpg) center no-repeat;background-size:auto, cover;">
<div class="caption">caption Text</div>
</div>
</a>
<a href="#">
<div id="foto3" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x512/0c40/768d432/none/11314/TKDX/papas-diez-tipos_3850905_20180807065646.jpg) center no-repeat;background-size:auto, cover;">
<div class="caption">caption Text</div>
</div>
</a>
</div>
</div>
</div>
Mosaic Image Gallery in CSS
First, make some divs to serve as columns. Then you use css to give them all a width (percent for fluid, px for fixed) and float them left.
Second, give all your images a width of 100% in css and distribute them among the columns.
Example (untested):
HTML:
<div class='col'>
<img />
<img />
<img />
</div>
<div class='col'>
<img />
<img />
<img />
</div>
CSS:
.col{
width:50%;
float:left;
}
img{
width:100%;
}
How to align images in a mosaic style? html/css
Use masonary.js
http://masonry.desandro.com/
Or you could code your own js function. A really good resource can be found here (an answer by the fellow who started this madness, a front-end dev for pinterest):
http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout
Currently, you can do this with css, using css3 column. Take a look at the example here (although this does not solve for your layout exactly):
http://jsfiddle.net/jalbertbowdenii/7Chkz/
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
Related Topics
Change Checkbox Check Image to Custom Image
Get Click Event of Each Rectangle Inside Canvas
Bootstrap Grid, Do I Need a Container
How to Handle HTML5 Constraint Validation Pop-Up Using Selenium
How Does the "Display: Contents" Property Value Work
CSS Font Size Using Em Different on Different Pages
Hidden Radio Button But Box Around It in IE8
Responsive 2-Column CSS Layout Including Sidebar with Fixed Width
100% Height Div Between Header and Footer
Absolute Positioning Ignoring Padding
Changing the Text Selection Color Using CSS
How to Move an Element That's on the Top to the Bottom in Responsive Design
Chrome Getusermedia Not Requesting Permission Locally
Flexbox Resize and Scrollable Overflow
How to Make Child Divs Use All Available Space When One Makes the Container Scroll
Fonts Not Rendering Uniformly in Browsers
How to Display Previous and Next Images with a Bootstrap Carousel