We Keep Coding

How to make background image of full height

<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;">
</a>
</div>
</div>
I want the background image to take full height and the sub-image must align the center of the background image.
And at last it must be responsive.

Use width:100vh to make full height and use left and right make the image become center.
Use the background-size: cover to resize the background image to cover the entire container.
<div class="col-lg-12 text-center">
<div class="for-video-background" >
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" >
</a>
</div>
</div>
CSS:
body{
margin: 0;
}
img{
width:5rem;
position: absolute;
left: 47.5%;
top: 47.5%;
}
.for-video-background{
height: 100vh;
background-size: cover;
background-image: url('./assets/images/back-video.png')
}

You have to use "height:100vh"
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;height: 100vh">
</a>
</div>
</div>

Flexbox flex-flow alternative for earlier versions of browsers

<template>
<div>
<h2>Kanal Listesi</h2>
<div class="container">
<div v-for="(channel,index) in channels" :key="index">
<div v-if="channel.ChName">
<img
:src="'http://uyanik.tv/conf/images/'+channel.Image"
:class="{selectedIndex:currentIndex === index}"
:ref="index"
/>
</div>
</div>
</div>
</div>
</template>
.container {
display: flex;
flex-flow: row wrap;
/*min-width:1200px;
overflow-x:auto; */
justify-content: center;
}
.container::after {
content: "";
flex: 0 1 32.7%;
}
div > div > div > div > img{
margin: 10px 10px 10px 10px;
height: 100px;
}
div{
text-align: center;
}
My VueJs app has a container which utilizes from flexbox to shift unfitting boxes to the next rows. The issue is that the app will be used in TVs which uses earlier versions of browsers . Thus, I am not able to use flex-flow property as old versions partially supports flexbox. Right now, items overflows to the outer screen. I must display the items like in the output below:
But I get this output in the device :

You can use float or inline-block to get this desired layout, see below example:
div {
width:100%;
padding:0 15px;
}
div img {
float:left;
margin:10px;
}
<div>
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
JSFiddle

If not visible, fix a grid-item on Masonry (top-right)

Im trying to get a grid-item of masonry fixed on the top right of grid container. If I scroll the window, and the item is no more visible, it gets fixed on the top right.
Im trying to apply this CSS to the third grid-item:
.fixed-top-right{
position: fixed;
top:0;
right:0;
}
This is my html:
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item fixed-top-right">
<img src="<?php echo get_template_directory_uri().'/img/submergedbp.jpg'; ?>" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
The CSS:
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.683%;
}
.grid-item {
float: left;
margin-bottom: 10px;
}
.grid-item img {
display: block;
max-width: 100%;
}
And the call of masonry:
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
gutter: 10,
columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
This is the base code from Masonry page that I'm editing.
If I just apply my CSS, the element goes left and it doesnt stay on the top. Is there a way to make the position of a grid-item fixed top-right inside the grid container if the element is no more visible on the screen?

How to create a grid of photos where you can hover them and they will change into other photos?

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');
}

Keeping image aspect ratio in a division

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.