We Keep Coding

Image max crop percentage

I'm building an responsive Image gallery using flexbox.
I want to make it respect aspect ratios, and still aim a 100% page with.
The term page in this case is equal to the parent container.
Parameters I want:
Aim for page with of 100% (exept don't force it if a image is upright and will be forced to crop more than 35% of the image)
If widescreen/landscape try to scale it to max-page width and still respect to not crop more than 35% of the image horizontal or vertical in total.
Max row height of around 25vh
-All rows don't need to have equal heights.
Problem
It's always cropping images way too much. So the main content is often not visible.
How can I avoid cropping it more than a defined percentage?
My approach so far:
<div className="App">
<div className="gallery__container">
{images.map((i) => (
<div className="gallery__image__container">
<img className="gallery__image" src={i} alt="ginger" />
</div>
))}
</div>
</div>
.gallery__container {
display: flex;
flex-wrap: wrap;
}
.gallery__image__container {
height: 25vh;
flex-grow: 1;
border: 3px solid transparent;
}
.gallery__image {
max-height: 100%;
min-width: 100%;
max-width: 100%;
object-fit: cover;
}
To clarify my problem I made a simplified example code sandbox:
https://codesandbox.io/s/adoring-spence-4qtc3?file=/src/App.js

Is there a way to auto add gradient to images?

Here is my code:
<div class='my-posts-container' id='<%=postobj._id%>'>
<%var menuid='menu'+postobj._id%>
<%var imagesource='../'+postobj.blob.path%>
<div class="my-posts-container-header">
<%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%>
</div>
<div class="menu hide" id="<%=menuid%>" >
<ul >
<li><button onclick="viewpost('<%=postobj._id%>')" >view</button></li>
<li><button onclick="removepost('<%=postobj._id%>')" >remove</button></li>
<!-- <li><button onclick="copypostlink('<%=postobj._id%>')" >copy link</button></li>
<li><button onclick="editthispost('<%=postobj._id%>')" >edit</button></li> -->
</ul>
</div>
<div class="post-image" >
<img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
</div>
<span>
<%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
</span>
<hr>
<div class="caption">
<%=postobj.caption%>
</div>
I want to keep my image size as 400px *400px
but add a background colour .post_image div,
basically, I want to add a gradient to the background based on any image in the image tag, something like this,
so that the whole 400 X 400 size is covered is this possible to achieve, if not can you suggest me other options, Thanks.

You can achieve something similar with CSS
Considering using this stylesheet
<style type="text/css">
.blured {
width:320px;
height:320px;
position: relative;
overflow: hidden;
}
.blured .blur {
height:70px;
width:100%;
position:absolute;
filter: blur(7px);
}
.blured .top {
top:0px;
background: linear-gradient(#000000d9, #00000000)
}
.blured .bottom {
bottom:0px;
background: linear-gradient(#00000000, #000000d9)
}
</style>
Then use the following markup
<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
<div class='blur top'></div>
<div class='blur bottom'></div>
</div>
The result will be something like this:
You can experiment with linear-gradient colors and the value for blur() to achieve an output close to your requirement.
References:
filter:blur()
background: linear-gradient

The effect you describe can actually be achieved. You just need to stack the same image with a smaller size on top of the image. The image underneath can then be blurred out and it will span the remainder of the 400px x 400px area.
To do this, you need to set the position field of the enclosing div to relative and that of both the images to absolute. I have reduced the height of the image sitting on top to 200px and kept the image width the same as the image underneath to resemble the style of the image in the question. Use filter: blur() to blur out the larger image.
Blurring softens the edges of the image (Remove the clip property and you'll know). Use the clip property to make the edges look "crisp".
I have used this image.
Run the code snippet below to see it in action:
<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
margin: auto;
position: relative;
width: 50%;
}
.outer {
filter: blur(5px);
position: absolute;
z-index: -1;
clip: rect(0,400px,400px,0);
}
.inner {
position: absolute;
top: 100px;
}
</style>
<div class="container">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>
This answers part of your question. Now, to automate the image placement as per size, you can retrieve and update the image dimensions using JavaScript:
var image = new Image();
image.onload = function() {
var height = image.height;
var width = image.width;
}
image.src = "<source>";
The image underneath will always be 400 x 400 px, you can update the attributes of the image on the top as per its actual retrieved dimensions if it is smaller than 400 x 400 px. Otherwise, squash it down to 400 x 400 px to cover the entire image underneath.

Parallax effect within bootstrap grid

Hello guys I'm trying to make simple parallax effect within bootstrap grid system and I've run into a problem. I made two divs side by side and I want one div to hold static image while other should have parallax effect.
I have a problem with parallax div background-size property no matter what I try I can't make it to cover my parallax div the way I want it, background image always end up being larger then it should be or not aligned correctly.
This is my code:
HTML:
<section id="twoImages" class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="parallax"></div>
</div>
<div class="col-md-6">
<img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper">
</div>
</div>
</section>
CSS:
body {
margin-bottom: 50em;
}
#twoImages {
padding: 0;
margin: 0;
}
#twoImages .col-md-6 {
padding: 0;
margin: 0;
}
#twoImages .parallax {
/* The image used */
background-image: url("https://placebear.com/715/470");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is the codepen so you can better understand my problem https://codepen.io/Karadjordje/pen/VpeBzp

Here is your answer
you need to use jquery
check this https://codepen.io/parthjasani/pen/YZwJMq
remove
background-attachment: fixed;
from css
and add this jquery code
var $ = jQuery.noConflict()
$(window).scroll(function(){
var scroll = $(this).scrollTop()
$(".parallax").css({"background-position":"0px "+scroll/2+"px"})
})

Image side of width 100% of div and fix height for responsive website

I am working on an ASP.NET MVC website. The landing page is slit into 4 divs:
Header div (where navigation bar is)
Image slider div (where I need to slide images)
Body div (contents of main body)
Footer div
Now the width and height of the image slider div is calculated on load or resize time and adjusted to cover the whole screen.
jQuery to adjust block height and width to 100% of the viewport:
$(window).bind('load resize', function () {
$("#nivo-slider").nivoSlider();
var viewport_height = $(window).height();
var viewport_width = $(window).width();
var bodyTopPadding = $("body").css('padding-top').replace(/[^-\d\.]/g, '');
$("#BannerImageSlider").css("height", ( viewport_height - bodyTopPadding )+ "px");
});
Image slider div:
<div id="BannerImageSlider">
<div class="slider-wrapper theme-default">
<div id="nivo-slider" class="nivoSlider" style="width: 100%">
<img src="~/Graphics/Images/slider1.jpg" alt="" />
<img src="~/Graphics/Images/slider2.jpg" alt="" />
<img src="~/Graphics/Images/slider3.jpg" alt="" />
</div>
</div>
</div>
My issue is the image height. I can manage the width as I am using Nivo Slider plugin, but the height goes over or small depending on screen size. I am working on image with 1400 X 900 resolution.
I want like this: http://www.coffeecreamthemes.com/themes/jobseek/demo2/
I have bought Slider Revolution but this is for Wordpress. Secondly I cannot find related jQuery and CSS files in the download bundle.
I need the solution, I am not sure of how to achieve this behavior.

This CSS should do it for you ;)
#BannerImageSlider {
position: relative;
}
#BannerImageSlider .slider-wrapper {
position: absolute;
top: -999px;
bottom: -999px;
left: -999px;
right: -999px;
max-width: 155.56vh;
max-height: 100vh;
margin: auto;
}
This slider would show fully covering the available area. :-)

Load images only in certains resolutions

I have a header at the top of my page which have two images, one of them is only visible when the viewport is large ( > 940) and the other only showed on mobile. To achieve this behavior, I'm using Bootstrap 3 and their defined sets of media queries:
<header class="container">
<div class="row">
<div class="col-lg-4 hidden-xs">
<img src="img/hi-res-logo.png">
</div>
<div class="col-xs-12 visible-xs">
<img src="img/small-logo.png">
</div>
</div>
</header>
So far, no big deal, the previous code does the job well, but what I want is prevent the load of the large image file itself on mobile to avoid unnecessary data consumption... so how to achieve that?

Set image as a background and use media query in CSS.
<div class="container">
<div class="row">
<div class="col-lg-4" id="my-div"></div>
</div>
</div>
CSS
#media (max-width: 700px) {
#my-div {
background-image: url('img/small-logo.png');
}
}
#media (min-width: 700px) {
#my-div {
background-image: url('img/hi-res-logo.png');
}
}

**I think it is better to use single media query in this case.**
#my-div {
background-image: url('img/hi-res-logo.png.png');
width: 100px; /*image width - please change as per your image*/
height: 100px; /*image height - please change as per your image*/
}
#media (min-width: 700px) {
#my-div {
background-image: url('img/small-logo.png');
width: 200px; /*image width - please change as per your image*/
height: 200px; /*image height - please change as per your image*/
}
}