Fill an image in a square container while keeping aspect ratio - javascript

I am trying to make a grid of images in CSS, out of random sized images that are not square.
Does anyone have a solution to filling all the space inside a fixed sized div with the image ?
See my example (blue is a fixed size div and red in the image inside it:

You can use the css, background-size: cover;
<style>
.img1 {
background-image: url(microsoft-logo.png);
}
.img2 {
background-image: url(google-icon.png);
}
.img3 {
background-image: url(Azend_Loggo.png);
}
.img-cover {
width: 50px;
height: 50px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
<div class="img-cover img1">
</div>
<div class="img-cover img2">
</div>
<div class="img-cover img3">
</div>

Use this CSS rule:
background-size: cover;
background-position: center;
DEMO

I have some code that does this and allows you to set the required sizes ...
<?PHP
function imageResize($image,$maxwidth,$maxheight) {
$imgData = getimagesize("img/profiles/".$image);
$width = $imgData[0];
$height = $imgData[1];
// takes the larger size of the width and height and applies the
// formula accordingly...this is so this script will work
// dynamically with any size image
// First we'll scale down the width since it's the larger of the tw values
if ($width > $maxwidth) {
$percentage = ($maxwidth / $width);
$width = round($width * $percentage);
$height = round($height * $percentage);
}
// Next we'll scale down the height since it's the larger of the tw values
if ($height > $maxheight) {
$percentage = ($maxheight / $height);
$width = round($width * $percentage);
$height = round($height * $percentage);
}
$topMargin = ($maxheight-$height)/2;
$topMargin .= "px";
//returns the new sizes in html image tag format...
// this is so you can plug this function inside an image tag and just get the results
return "width=\"$width\" height=\"$height\" style=\"margin-top:$topMargin px;\"";
}
?>
and then include the following:
<div id="profile-picture">
<img src="img/profiles/<?PHP echo $profileImg; ?>" <?PHP echo imageResize($profileImg,238,232); ?> />
</div>
Not sure if that's helpful .. but it worked for me.

You can try below css for image tag of your fixed div in this solution one condition you have to follow which is, your images size should be larger then your div i.e if your div will be 100px then minimum image size should be 100px or more then that :
div > img {
width:100%;
overflow:hidden;
}

Seeing as you've tagged the question with jQuery i'll take the liberty to suggest you write a small jQuery plugin for this. Here's the JSFiddle demo.
// Define plugin 'containImg'
$.fn.containImg = function(){
this.each(function(){
// Set variables
var $t = $(this),
$p = $t.parent('div'),
pw = $p.width(),
ph = $p.height(),
// Figure if width or height should be 100%
iw = ( pw / ph >= 1 ) ? 'auto' : '100%',
ih = ( iw == 'auto' ) ? '100%' : 'auto';
// Set dimensions
$t.css({
'width': iw,
'height': ih
});
});
}
// Call plugin
$('img').containImg();
The basic logic is if the image has a horizontally stretched parent div, you'll need to set height:100% to fill the height, and width:auto to maintain the aspect ratio. If the parent div shape is vertical, you'll have to reverse this.
If anyone has views on how to improve the code I'm up for suggestions!

You could use just css for it but js can help, here follow my simple code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
div.image-box{display:block;position:relative;overflow:hidden;width:200px;border:1px solid #ccc;padding:0;height:200px;}
div.image-box img{width:100%;height:auto;margin:0; padding:0;margin-bottom:-4px;position:absolute;top:0;left:0;}
div.image-box.horizontal img{height:100%;width:auto;left:50%;}
div.image-box.vertical img{height:auto;width:100%;top:50%;}
</style>
</head>
<body>
<div class="image-box"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS08-IWtcbvcehgeszlD2nI6s-OAungNCsLNIc-f3QjIOkvOq8abg" alt=""></div>
<div class="image-box"><img src="http://1.bp.blogspot.com/_e-y-Rrz58H4/TUS4qRlRUrI/AAAAAAAABQo/H322eTHRB2s/s1600/Man_Face.jpg" alt=""></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.image-box').each(function(){
if($(this).find('img').height() > $(this).find('img').width()){
$(this).addClass('vertical');
$(this).find('img').css('margin-top','-'+$(this).find('img').height()/2+'px');
}else{
$(this).addClass('horizontal');
$(this).find('img').css('margin-left','-'+$(this).find('img').width()/2+'px');
}
});
});
</script>
</body>
</html>
Hope that helps

Related

How can I hide or remove div width and height if div background-image did not display

I have a div I would like to remove the width and height if the background-image used on that div did not show
Below is my code for the background image
<div id="loaderimage" style="background-image: url(domain.com/'.str_replace(' ', '%20',$firstImage).'); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover">;
The expected result is to hide/remove div or div width and height if the background image did not return any image
Use multiple background:
background-image: url('http://1stimg.jpg'), url('http://2ndimg.jpg');
If the first not load fallback with the second.
I tried many things and come up to MDN Image() class.
As #red said either we can use Ajax for check image or need to use Image() class.
I have created one class that check image load or not by built in methods from Image() class.
Example
class validateImage extends Image {
constructor(elementId) {
super(elementId);
this.getImageBackground(elementId);
}
getImageBackground(elementId) {
this.elementId = elementId;
this.image = document.getElementById(this.elementId);
this.style = this.image.currentStyle || window.getComputedStyle(this.image, false);
this.backgroundImage = this.style.backgroundImage.slice(4, -1).replace(/['"]/g, "");
super.src = this.backgroundImage;
}
validate() {
super.onerror = function() {
this.removeArea();
}
}
removeArea() {
this.image.style.height = "0px";
this.image.style.width = "0px";
this.image.style.paddingTop = "0px";
}
}
// Invalid Image.
var validate = new validateImage("loaderimage");
validate.validate();
// Valid Image.
var validate1 = new validateImage("loaderImageValid");
validate1.validate();
<div id="loaderimage" style="background-image: url(https://homepages.cae.wisc.edu/~ece533/images/arctichare.pngs); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover"></div>
<div>
Test Second Div.
</div>
<div>
Test Third Div.
</div>
<div>
Test Fourth Div.
</div>
<div>
Test Fifth Div.
</div>
<div>
Test Six Div.
</div>
<div>
Test Seven Div.
</div>
<div>
Test Eight Div.
</div>
<div>
Test Nine Div.
</div>
<div id="loaderImageValid" style="background-image: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover"></div>
Fiddle.
This class check image loaded or not and if found any errors then it will remove div's height, width and padding-top.
References
Check if image exists on server using JavaScript?
Javascript: Get background-image URL of
Javascript
let bg = $('#loaderimage').css('background-image');
let imgPath = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
console.log(imgPath);
if(imgPath ==''){
$('#loaderimage').hide();
}
PHP
<?php
if(!empty(trim($firstImage)) ){ ?> // add your condition here
<div id="loaderimage" style="background-image: url(domain.com/'.str_replace(' ', '%20',$firstImage).'); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover">;
<?php } ?>

Controlling image height in Bootstrap-Lightbox gallery

I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>
I solved it this way by editing the Javascript:
onContentLoaded: function() {
var imgh = $(".ekko-lightbox-container").find("img").height();
var winh = $(window).height();
if ((imgh+200)>winh)
{
$(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
}
}
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.

Fit image into a container, even when src is changed

I'm sure there are other post that address this in various ways.
I've been struggling with this a bit, trying to do CSS only approach with no luck. Playing around with css width and height, doing a mix of 100% and auto on the image got me nowhere.
Given html:
<div class="container">
<img src="http://image" />
</div>
And css:
.container { width: 500px; height: 400px; }
How to fit images of various sizes into the container while preserving aspect ratio and obeying constraints of the container?
I believe you are far over-thinking this.
Try adding the following CSS, and removing the javascript:
.container img {
max-width: 100%;
max-height: 100%;
}
Here's a demo (click the images to dynamically load a different size)
I ended up with javascript solution - I know, not ideal but it's the best I could come up with that does what I need it to. The page where I'm using this relies on javascript to perform other bits of functionality so that's not a problem in my scenario. I'm also loading images into a Bootstrap grid layout column, like so:
<div class="row">
<div class="col-md-6">
<div class="main-image">
<img src="http://initialimage" />
</div>
</div>
<div class="col-md-6">
Some content here ...
</div>
</div>
The width of the container in this case is controlled by bootstrap layout css so I only need to set the height of the container:
.main-image { height: 400px; }
I tried with using just
.main-image { max-height: 400px; }
So that the container would adjust to horizontally stretched images but then jQuery gets the container height wrong.
Anyway, here's the javascript I'm using:
var imageLoaded = function () {
var container = $(this).parent();
var maxWidth = container.width();
var maxHeight = container.height();
var width = $(this).width();
var height = $(this).height();
var containerRatio = maxWidth / maxHeight;
var ratio = width / height;
if (ratio > containerRatio) {
$(this).attr('width', '100%;');
$(this).attr('height', 'auto');
}
else {
$(this).attr('height', '100%;');
$(this).attr('width', 'auto');
}
};
$(document).ready(function () {
$('.main-image img').bind('load', imageLoaded);
imageLoaded.call($('.main-image img'));
});
You may wonder why the manual invocation of imageLoaded function - it's because in IE, the event doesn't fire for the initially loaded image. Invoking it manually corrects that.
You can then change the image source:
$('.main-image img').attr('src', 'http://otherimage');
And the image will adjust to fit the container by either using up full height for vertical images or full width for horizontal images.
Any better way to do this or comments welcome.

Missing pixels & body stops centering when resizing jquery

I'm facing some problems with this code. I thought may be you could help me.
First of all, my sections have no padding and no border so the pixels are used only for top, left, right and width properties
and there is no need for outerWidth().
First problem:
In the beginning I set the body 'left' and 'right' property at (window_width - 1100 = 180) so my body width
is 920px.
The thing is it's not. It turns to be 904. I've tested it with chrome and mozilla.
I don't know where the 16 missing pixels are.
Second:
I want my body to be centered when I resize the window and my margins to grow less until body occupies the whole
window.
My body doesn't remain centered, plus only one of the margins grows less.
I found out this is happening because '#content', '#mainContent', 'aside' have a width. I kinda' need that width to be set.
Is there any way I can make my window center itself with jquery and do all the stuff above?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body{
position:absolute;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;
window_h = $(window).height();
window_w = $(window).width();
top = window_h - (window_h - 100);
left_right = window_w - 1100;
content_w = window_w - 2*left_right;
$('#content').css('width', content_w);
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
resize_body(top, left_right, left_right);
//next three lines are written only for demonstration purpose
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
alert('body width: '+$('body').css('width'));//it supposed to be 920
alert('left propery value: '+left_right);//it supposed to be 180
$(window).resize(function(){
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
resize_body(top, left_right, left_right);
});
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>
Reset browser style:
html, body {
margin: 0 auto;
padding: 0;
}

How can I make images fill 100% of a div if "they don't fit"

I have multiple images (50x50), my site width is 980 px
I want to fill one row with images, without any gap. But without any CSS/JS/help from you, the 20th images ends up on the second row.
How can I show 40% of the 20th images?
On your container div:
#container{
overflow:hidden; /* Hide the overflow */
}
I found a solution by myself.
Use CSS to display a shorter width:
<?php
$img = "";
$width = 50;
for($i=0;$i<20;$i++) {
if($i == 19) {
$width = 30;
}
?>
<img src="<?=$img;>" style="width: <?=$width;?>px; height:50px;" />
<?php
}
?>
img:nth-child(20n) { width:30px; }

Categories