I want to make an image slider that will cover fifty percent of the homepage. but somehow I can't make these photos sensitive. I want my carousel to shrink as it resizes. I just found some solutions with Jquery on the internet, but I want vanilla javascript or pure css & scss solution. How can I make my slider and photos responsive?
For demo: https://codepen.io/BerkayAkgurgen/pen/qBqMxeo
<main>
<div class="slider-container">
<div class="slider">
<div class="slider-img">
<img src="./img/batman-banner.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img class="deneme2" src="./img/lord-of-the-ring.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/avengers.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/batman.jpg" alt="">
</div>
</div>
</div>
</main>
img {
display: block;
width: 100vw;
height: 100%;
object-fit: cover;
}
main {
position: relative;
width: 100vw;
height: 500px;
}
.slider {
width: 100vw;
max-height: 500px;
}
.slider-img {
width: 100vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Related
Hey guys I am kind of new to web dev and would appreciate some guidance. I am attempting to add a mouseenter event to an img tag in order to make a sibling div visible, however I have run into some weird behavior. The mouseenter event only seems to be successful for every single img tag besides the ones in the first row of the grid. So in my desktop view both trackid-img and stussy-img do not work and in mobile view only trackid-img does not work. Is my logic bad? Would I be better off placing these images in a div as a background image, instead of img tags, and applying the mouseenter/hover to the div? Essentially, all I would like to be able to do is hover over the image and upon hovering over the image another element is revealed. These elements would be links related to the image hovered.
var trackid = document.querySelector(".trackid-img")
var stussy = document.querySelector(".stussy-img")
var caltrends = document.querySelector(".caltrends-img")
var br8s = document.querySelector(".br8s-img")
var trackid_links = document.querySelector(".trackid-links")
var stussy_links = document.querySelector(".stussy-links")
var caltrends_links = document.querySelector(".caltrends-links")
var br8s_links = document.querySelector(".br8s-links")
trackid.addEventListener('mouseenter', showTrackidLink)
stussy.addEventListener('mouseenter', showStussyLink)
caltrends.addEventListener('mouseenter', showCaltrendsLink)
br8s.addEventListener('mouseenter', showbr8sLink)
function showTrackidLink(){
trackid_links.style.visibility = "visible"
}
function showStussyLink(){
stussy_links.style.visibility = "visible"
}
function showCaltrendsLink(){
caltrends_links.style.visibility = "visible"
}
function showbr8sLink(){
br8s_links.style.visibility = "visible"
}
.projects {
height: 100vh;
background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}
.project-container {
position: relative;
top: 10vh;
}
.work-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.work-col {
margin: 1rem 0;
margin-left: auto;
margin-right: auto;
}
.project-card {
position: relative;
min-height: 38vh;
width: 36rem;
text-align: center;
}
.trackid-img {
position: relative;
top: 10vh;
height: auto;
width: 30rem;
}
.stussy-img {
position: relative;
top: 2vh;
height: auto;
width: 15rem;
}
.caltrends-img {
position: relative;
top: 4vh;
height: auto;
width: 16rem;
}
.br8s-img {
position: relative;
top: 10vh;
height: auto;
width: 20rem;
}
.work-link {
visibility: hidden;
}
.trackid-links {
position: relative;
top: 20vh;
}
.stussy-links {
position: relative;
top: 2vh;
}
.caltrends-links {
position: relative;
top: 10vh;
}
.br8s-links {
position: relative;
top: 15vh;
}
<section class="projects">
<div class="outer-container">
<div class="project-container">
<div class="work-row">
<div class="work-col">
<div class="project-card trackid-card">
<img class="trackid-img" src="images/TRACKID.png">
<div class="work-link trackid-links">
<a href="">
<img class="github-img" src="images/github.png">
</a>
<img class="linkedin-img" src="images/linkedin.png">
</div>>
</div>
</div>
<div class="work-col">
<div class="project-card stussy-card">
<img class="stussy-img" src="images/stussy.png">
<div class="work-link stussy-links">
<a href="https://github.com/br8S/Stussy-Landing-Page">
<img class="github-img" src="images/github.png">
</a>
<a href="https://br8s.github.io/Stussy-Landing-Page/">
<img class="linkedin-img" src="images/linkedin.png">
</a>
</div>
</div>
</div>
</div>
<div class="work-row">
<div class="work-col">
<div class="project-card caltrends-card">
<img class="caltrends-img" src="images/CALTRENDS.png">
<div class="work-link caltrends-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
<div class="work-col">
<div class="project-card br8s-card">
<img class="br8s-img" src="images/br8SLOGO.png">
<div class="work-link br8s-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Because you want to do the same thing regardless of which image is moused over (make the next sibling div visible), you should avoid writing separate event handlers and just use one. The way to accomplish this is to, rather than relying on ids or unique class names, use relative references to the next sibling element after the one that triggered the event.
Additionally, instead of setting up event handlers on each image, you can just set one up at a common ancestor of all the images and let the event bubble up to that ancestor. Then handle the event there and based on what element actually triggered the event, proceed as needed. This is called "event delegation" and makes the code, it's performance and scalability much better.
In the code below, notice that I've added an additional class of mouse to any image that needs to be responsible for triggering the event, but also notice that there are no loops, no references to ids or unique class names and no repeating of essentially the same function. If you have a new project-card in the future, just add the proper HTML structure to what's already there and it will work without any other changes.
// Just set up one event handler on a common ancestor
// of all the images that "might" be moused over
document.querySelector(".project-container").addEventListener("mouseover", function(event){
// Determine if the event originated with one of the
// images that we care about handling (I have given
// each of the images that need to be originators of
// this event an additional HTML class of "mouse").
if(event.target.classList.contains("mouse")){
// Make the next element sibling visible
event.target.nextElementSibling.classList.remove("work-link");
}
});
.projects {
height: 100vh;
background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}
.project-container {
position: relative;
top: 10vh;
}
.work-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.work-col {
margin: 1rem 0;
margin-left: auto;
margin-right: auto;
}
.project-card {
position: relative;
min-height: 38vh;
width: 36rem;
text-align: center;
}
.trackid-img {
position: relative;
top: 10vh;
height: auto;
width: 30rem;
}
.stussy-img {
position: relative;
top: 2vh;
height: auto;
width: 15rem;
}
.caltrends-img {
position: relative;
top: 4vh;
height: auto;
width: 16rem;
}
.br8s-img {
position: relative;
top: 10vh;
height: auto;
width: 20rem;
}
.work-link {
visibility: hidden;
}
.trackid-links {
position: relative;
top: 20vh;
}
.stussy-links {
position: relative;
top: 2vh;
}
.caltrends-links {
position: relative;
top: 10vh;
}
.br8s-links {
position: relative;
top: 15vh;
}
<section class="projects">
<div class="outer-container">
<div class="project-container">
<div class="work-row">
<div class="work-col">
<div class="project-card trackid-card">
<img class="trackid-img mouse" src="images/TRACKID.png">
<div class="work-link trackid-links">
<a href="">
<img class="github-img" src="images/github.png">
</a>
<img class="linkedin-img" src="images/linkedin.png">
</div>>
</div>
</div>
<div class="work-col">
<div class="project-card stussy-card">
<img class="stussy-img mouse" src="images/stussy.png">
<div class="work-link stussy-links">
<a href="https://github.com/br8S/Stussy-Landing-Page">
<img class="github-img" src="images/github.png">
</a>
<a href="https://br8s.github.io/Stussy-Landing-Page/">
<img class="linkedin-img" src="images/linkedin.png">
</a>
</div>
</div>
</div>
</div>
<div class="work-row">
<div class="work-col">
<div class="project-card caltrends-card">
<img class="caltrends-img mouse" src="images/CALTRENDS.png">
<div class="work-link caltrends-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
<div class="work-col">
<div class="project-card br8s-card">
<img class="br8s-img mouse" src="images/br8SLOGO.png">
<div class="work-link br8s-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I want my images in an image carousel to scale when I change the size of the window. If I add the following to the CSS,
.carousel-slide img {
display: block;
width: 100%;
}
then for some reason I think the browser is taking the div class="carousel-slide" as the parent of the img instead of the figure, and I get all 4 images displaying in the width of the figure. Or perhaps it is because I am using the CSS Grid? How do I fix this behaviour?
HTML:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main>
<section id="image-carousel">
<button id="leftButton">
PREV
</button>
<div id="carousel">
<div class="carousel-slide">
<figure>
<img id="lastClone" src="image-4.jpg" alt="">
<br>
<figcaption>
figcap1
</figcaption>
</figure>
<figure>
<img src="image-1.jpg" alt="">
<br>
<figcaption>
figcap2
</figcaption>
</figure>
<figure>
<img src="image-4.jpg" alt="">
<br>
<figcaption>
figcap4
</figcaption>
</figure>
<figure>
<img id="firstClone" src="image-1.jpg" alt="">
<br>
<figcaption>
figcap5
</figcaption>
</figure>
</div>
</div>
<button id="rightButton">
NEXT
</button>
</section>
</main>
</body>
</html>
CSS:
#image-carousel{
display: grid;
grid-template-areas:
". leftButton carousel rightButton .";
grid-template-columns: 0.4fr 0.5fr 60vw 0.5fr 0.4fr;
grid-template-rows: auto;
}
#carousel{
grid-area: carousel;
overflow: hidden;
}
.carousel-slide{
display: flex;
width: 100%;
height: 550px;
}
.carousel-slide img{
z-index: 1;
/*width: 100%; this is treating carousel-slide as parent instead of figure? why?*/
}
.carousel-slide figure{
width: 100%;
}
#leftButton{
grid-area: leftButton;
z-index: 3;
}
#rightButton{
grid-area: rightButton;
z-index: 3;
}
#carousel figcaption{
background-color: rgba(15, 27, 27, 0.7);
text-align: center;
height: 50px;
width: auto;
position: relative;
bottom: 50px;
z-index: 2;
}
When I use Material Box from Materialize along with Muuri grid items, the maximized Material Box will still display behind the subsequent Muuri grid items even though the Material Box's z-index is set high.
Here's my plunker example https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/.
In the example, if you click on box three it appears to work, but if you click on boxes one and two you will see that they will still have the other boxes overlapping them.
Here's the CSS:
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
Here's the HTML:
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
Here's the JavaScript:
$(function() {
var grid = new Muuri('.grid');
});
I just created a new example from your code and it's working fine. Hope this will help!
here is the link to that example MUURI EXAMPLE
code:
HTML
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background: #fcfaf9;
}
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
height: 200px;
width: 200px;
line-height: 200px;
margin: 5px;
text-align: center;
z-index: 1;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
color: #fff;
background: #59687d;
font-size: 40px;
text-align: center;
}
.item.muuri-item-dragging .item-content {
background: #8993a2;
}
.item.muuri-item-releasing .item-content {
background: #152c43;
}
JS
const grid = new Muuri(".grid", {
dragEnabled: true
// dragAxis: 'y'
});
I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>
I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>
Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}
The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}
I have a division with n-number of divs which consist of images of different sizes:
<div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<!-- dynamically the images will be loaded -->
</div>
The functionality I am looking for is:
They have to flow in one row regardless of the number of images, which means they should re-size to smaller images if there is a large number of images.
The images aspect ratio has to be kept on re-sizing
The div should be all equal width and height on re-sizing
What I'd actually like is for each image to be aligned within a square that is consistently sized with all of the other images. Each image should be constrained and re-sized within their own square. Then I want all of the containing squares to be sized across the row. So as the number of images increases the size of the squares decrease accordingly.
I have tried and searched a lot for the solution, but nothing worked. Please demonstrate some real examples with the functionality I mentioned above.
I'd prefer using pure css and html, something like this:
<div class="ratio-16-9">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
</div>
<style>
.ratio-16-9,
.ratio-12-9,
.ratio-1-1 {
display: block;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.ratio-16-9 img,
.ratio-12-9 img,
.ratio-1-1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ratio-1-1 {
padding-bottom: 100%;
}
.ratio-12-9 {
padding-bottom: 73.47%;
}
</style>
You can try something like this, although it requires an additional div:
* {
margin: 0;
padding: 0;
}
.outer-wrap-img {
display: table;
table-layout: fixed;
width: 100%;
}
.inner-wrap-img {
display: table-cell;
}
.inner-wrap-img div {
padding-bottom: 100%;
position: relative;
}
.inner-wrap-img div img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
}
.red {
background: #F00;
}
.green {
background: #0f0;
}
<div class="outer-wrap-img">
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
</div>
This should fulfill your requirement. set the total no. of image to variable imageCount and the code will calculate accordingly. Right now i have given background red. You can set image url when you use
var imageCount = 27;
var width = window.innerWidth;
var divWidth = width/imageCount;
var html = "";
for(var i=0;i<imageCount;i++)
{
html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>";
}
document.getElementById("images").innerHTML = html;
*{
padding: 0;
margin: 0;
}
<div id="images">
</div>
Use flexbox, or, you can use a table.