i am trying to put several images (five) next to each other in one row. The row should have the width of a 100%. It is important that the images all have the same height e.g.! Is there a way to manage this? I tried several code, e.g. a masonry, but it does not help me with the height of the images.
Thank you
(I am using Bootstrap if that's any help.)
Edited, new answer.
The code below should do the job.
Note that I have inserted comments between all the img tags in the html, this is to make sure that there is no spacing between the images and is therefore important for the code to work!
Also note that if you change the class of the div which contains the images, you will have to change the query selector in the javascript to match this.
Final note: the script is very laggy here in the code snippet. I tried it as an actual webpage and it was not laggy at all, so maybe try that too!
var repeat = true;
window.addEventListener("load", resizeImages);
window.addEventListener("resize", resizeImages);
function resizeImages() {
var i;
var images = document.querySelectorAll("div.row img");
var heights = [];
var widths = [];
for (i = 0; i < images.length; i++) {
heights.push(images[i].offsetHeight);
widths.push(images[i].offsetWidth);
}
var numerator = document.body.clientWidth;
for (i = 0; i < heights.length; i++) {
numerator *= heights[i];
}
var denominator = 0;
for (i = 0; i < widths.length; i++) {
var thisItem = widths[i];
for (i2 = 0; i2 < heights.length; i2++) {
if (i != i2) {
thisItem *= heights[i2];
}
}
denominator += thisItem;
}
var height = numerator / denominator;
for (i = 0; i < images.length; i++) {
images[i].height = height;
}
if (repeat) {
repeat = false;
setTimeout(function() {
resizeImages();
}, 300)
}
}
div.row {
white-space: nowrap;
}
<html>
<head>
<title></title>
</head>
<body>
<div class="row">
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" alt=""><!--
--><img style="padding-left:5px;" src="https://jessehouwing.net/content/images/size/w600/2018/07/stackoverflow-1.png" alt=""><!--
--><img src="http://www.andysowards.com/blog/assets/8-Best-Websites-That-Will-Hone-Your-Programming-Skills-7-1024x538.png" alt="">
</div>
</body>
</html>
I used CSS Grid for your implementation. .row is 100% width and each image can have its own custom scaling if need be.
Be aware, images are hard make constant because each image will come with its own ratio and size.
You can use background-size to set image property to your liking.
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
Hope the example below helps.
Reference background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Reference CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
img {
height: 130px;
width: 100%;
}
.row{
width: 100%;
display: grid;
grid-template-rows: auto;
grid-template-columns: repeat(5, 1fr);
/* If each individual picture column need modification*/
/* grid-template-columns: auto 1fr 200px 15px 10%; */
}
<div class="row">
<img src="https://loremflickr.com/cache/resized/8447_7961096220_79eb4fb07c_c_640_360_nofilter.jpg" alt="">
<img src="https://loremflickr.com/cache/resized/65535_40670884373_757596f5d1_b_640_360_nofilter.jpg" alt="">
<img src="https://loremflickr.com/cache/resized/65535_47957578362_73f1562d77_z_640_360_nofilter.jpg" alt="">
<img src="https://loremflickr.com/cache/resized/65535_46970967485_3456a6be5f_z_640_360_nofilter.jpg" alt="">
<img src="https://loremflickr.com/cache/resized/2544_3722368834_5584ab3bc1_z_640_360_nofilter.jpg" alt="">
</div>
Related
Is possible to get "10vw" for the element width in browser or extension.Chrome "Copy Styles" just works fine.But I wanna do it in an extension.
Source code for chrome devtools
<style>
div { width: 10em }
body div { width: 10em }
#id { width: 10vw }
</style>
<div id="dom"></div>
// if viewport width is 375px
var dom = document.getElementById('app');
var style = window.getComputedStyle(dom);
var width = style.getPropertyValue('width');
console.log(width) // 37.5px, "10vw" would be great
var element = document.getElementById('dom')
var elementWidth = getComputedStyle(element ).width
this will always return width with pixels.
hope this will be helpfull
I am creating a web page which needs has to display some movie covers all in a single page, without scrolling it, becouse it will be on display. the problem is that i want to get the content to resize instead of making the web page scrollable. I also need to support n movies (they are dependent). I've tried using flexbox twice, but it doesnt work. Also, I am using tailwindcss framework, but i don't think that's a problem as it is just css in form of classes...
<html class='h-full m-0 p-0'>
<head>
<link href="https://unpkg.com/tailwindcss#next/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class='h-full m-0 p-0'>
<div class='mx-10 mt-10 flex content-center items-center'>
<div class='flex flex-wrap'>
<!-- iterate over every movie -->
<div class='m-2 relative flex-grow h-full' style='flex-basis: 20%'>
<span class='px-2 py-1 rounded-full bg-blue-500 text-white absolute z-0' style='top: -0.5rem; right: -0.5rem'>0</span>
<img src='https://images.unsplash.com/photo-1525604803468-3064e402d70c' class: 'w-full' />
<span class='w-full opacity-75 bg-black text-white py-1 absolute z-0 inset-x-0 bottom-0 text-center px-2'>title</span>
</div>
<!-- end -->
</div>
</div>
</body>
</html>
EDIT: I added a the full example (with an example image take from unsplash) of what i want it to look like.
I don't think there is a way to do what you are asking without JavaScript. In the following example, I used CSS to maintain the ratio of the covers, and used JavaScript to calculate the maximum width that would keep the content from scrolling vertically.
Here is a fiddle.
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
let numCovers = 10;
let coverList = document.querySelector(".cover-list");
// this function determines what percentage of the cover-list's width
// each cover should take up. It will maximize how large they can be
// without making the total grid size larger than cover-list.
// This should prevent scrolling.
function getBasis() {
let ratio = 1.35; // height/width
let width = coverList.clientWidth;
let height = coverList.clientHeight;
// this loop is really slow, you may want to find a faster way
let col = 0;
let accWidth, accHeight, numRows;
do {
col++;
if (col > numCovers) {
// maximize height
return (height / ratio) + "px";
}
accWidth = width / col;
accHeight = accWidth * ratio;
numRows = Math.ceil(numCovers / col);
} while (accHeight * numRows > height);
return (100 / col) + "%";
}
function generateCovers() {
// clear existing covers
coverList.innerHTML = "";
let basis = getBasis();
for (let i = 0; i < numCovers; i++) {
let cover = document.createElement("div");
cover.classList.add("cover");
cover.style.flexBasis = basis;
let inner = document.createElement("div");
inner.classList.add("inner");
inner.style.backgroundColor = getRandomColor();
cover.append(inner);
coverList.append(cover);
}
}
let numCoversInput = document.querySelector("#num-covers");
numCoversInput.addEventListener("change", function() {
numCovers = Math.min(Math.max(this.value, 1), 500);
this.value = numCovers;
generateCovers();
});
generateCovers();
window.addEventListener("resize", function() {
let basis = getBasis();
coverList.querySelectorAll(".cover").forEach(function(el) {
el.style.flexBasis = basis;
});
});
body {
/* set margin to computable value for cover-list calcs */
margin: 5px;
}
#controls {
height: 25px;
}
.cover-list {
/* account for margin and controls with calc */
width: calc(100vw - 10px);
height: calc(100vh - 35px);
/* use flex so the content will wrap as desired */
display: flex;
flex-wrap: wrap;
align-content: start;
}
.inner {
/* padding percentages are based on width, so setting
the height to 0 and padding-bottom to a percentage
allows us to maintain a ratio */
width: 100%;
height: 0;
padding-bottom: 135%;
}
<div id="controls">
<label>
Number of covers: <input id="num-covers" type="number" value="10" min="1" max="500"/>
</label>
</div>
<div class="cover-list">
</div>
I'm trying to make a circle out of images with different sizes and different shapes (some rectangle, some sqaure, some portrait, some landscape).
When I'm using: clip-path: circle(50% at 50% 50%); or border-radius: 50%;, it turns the image into a perfect circle, only if the image is square:
Is there a way to crop an image into a square and then use one of these methods to make it a perfect circle:
Using pure CSS withou using background-image (most images are given the background image from server side),
Keeping a 50% ratio - without losing aspect ratio - (both if border-radius or clip-path)(Images size may vary).
Here's a code snippet to show a square image and a rectangle image:
.clipped {
clip-path: circle(50% at 50% 50%);
}
Square<br>
<img src='http://i.imgur.com/d5byNNR.jpg' width="100" class='clipped' /><br><br>
Rectangle<br>
<img src='http://i.imgur.com/22W12EQ.jpg' width="100" class='clipped' />
You can use circle() but without the parameters:
.clipped {
clip-path: circle();
}
It appears to use the smaller side of your image as the circle's circumference.
Working sample here.
It works on Chrome and FireFox. IE and Edge still does not support clip-path
That's an another way to do it using pure CSS:
HTML
<div class="circular--portrait">
<img src='http://i.imgur.com/22W12EQ.jpg'/>
</div>
CSS
.circular--portrait {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: auto;
margin-top: -30px;
}
Code Snippet (with portrait and landscape examples)
Alright, took me a moment but this is what I came up with:
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox, xOffSet, yOffSet) {
var result = { width: 0, height: 0, fScaleToTargetWidth: true };
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
}
else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
}
else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
//result.targetleft = Math.floor((targetwidth - result.width) / 2);
//result.targettop = Math.floor((targetheight - result.height) / 2);
result.targetleft = Math.floor((targetwidth - result.width) / 2 - xOffSet);
result.targettop = Math.floor((targetheight - result.height) / 2 - yOffSet);
return result;
}
function OnImageLoad(evt, xOffSet = 0, yOffSet = 0) {
var img = evt.currentTarget;
// what's the size of this image and it's parent
var w = $(img).width();
var h = $(img).height();
var tw = $(img).parent().width();
var th = $(img).parent().height();
// compute the new size and offsets
var result = ScaleImage(w, h, tw, th, false, xOffSet, yOffSet);
// adjust the image coordinates and size
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
.result {
width: 250px;
height: 250px;
border: thick solid #666666;
overflow: hidden;
position: relative;
border-radius: 50%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No offset:
<div class='result'>
<img src="http://i.imgur.com/22W12EQ.jpg" style="position: absolute;" onload="OnImageLoad(event, 0, 0);"/>
</div>
Y offset:
<div class='result'>
<img src="http://i.imgur.com/22W12EQ.jpg" style="position: absolute;" onload="OnImageLoad(event, 0, 30);"/>
</div>
I took most of the work from this resource: https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/ and I've adepted it to allow the use of Offsets so you can crop any image at the position you want.
How it works
You create a div of any size you want. It can be square, but if you want an egg-like result, that works as well (lol). Then insert the image of any unknown size inside it.
Change onload="OnImageLoad(event, 0, 30); with the offsets you want. Positive offsets for moving the image left or down, negative for up or right.
Note: I did use jQuery for this.
I'm trying to come up with an effective way of defining a nested flexbox and allow it to be resized. I think it's almost there:
http://jsfiddle.net/6j10L3x2/1/
I'm using three custom elements purely to make the mark-up more declarative:
flex, flex-item, flex-resizer
A flex represents the container. A flex-item presents an element within the container, and flex-resizer represents a resizer widget which can be placed between two flex-items to add resizing functionality between them.
This all appears to work really well. However, it only handles items sized with flex-grow. If flex-shrink or flex-basis is defined, then the calculations simply don't work.
Can anyone suggest a way to amend this to allow it work for all cases? I realise that there is some ambiguity in regards to how the space should be shared between items with various flex configurations, but any input would be welcome.
Any alternative approaches would be welcome also. Thanks.
Wow. I am impressed how you resize the flexbox elements with vanilla javascript using 'flexGrow', excelent idea and code.
I have improve your code in a few ways and it is working very well.
What I did?
1.- I simplified the HTML:
Do not use a flex element inside a flex-item.
Use a flex or flex-item element, always!, inside another
flex element.
2.- Solved!
Splitter's jump when the visible flex-item size is smaller that its content size.
3.- I'd added different cursors to signal a state's change (setupResizerEvents, onMouseUp) to improve usability.
4.- I've added code to prevent the cursor from flickering when dragging.
5.- use of offsetWidth and offsetHeight in manageResize() versus scrollWidth and scrollHeight to avoid splitter's jump on resize when a flex-item content overflow (overflow: auto).
Here is the code:
function manageResize(md, sizeProp, posProp) {
var r = md.target;
var prev = r.previousElementSibling;
var next = r.nextElementSibling;
if (!prev || !next) {
return;
}
md.preventDefault();
var prevSize = prev[sizeProp];
var nextSize = next[sizeProp];
var sumSize = prevSize + nextSize;
var prevGrow = Number(prev.style.flexGrow);
var nextGrow = Number(next.style.flexGrow);
var sumGrow = prevGrow + nextGrow;
var lastPos = md[posProp];
function onMouseMove(mm) {
var pos = mm[posProp];
var d = pos - lastPos;
prevSize += d;
nextSize -= d;
if (prevSize < 0) {
nextSize += prevSize;
pos -= prevSize;
prevSize = 0;
}
if (nextSize < 0) {
prevSize += nextSize;
pos += nextSize;
nextSize = 0;
}
var prevGrowNew = sumGrow * (prevSize / sumSize);
var nextGrowNew = sumGrow * (nextSize / sumSize);
prev.style.flexGrow = prevGrowNew;
next.style.flexGrow = nextGrowNew;
lastPos = pos;
}
function onMouseUp(mu) {
// Change cursor to signal a state's change: stop resizing.
const html = document.querySelector('html');
html.style.cursor = 'default';
if (posProp === 'pageX') {
r.style.cursor = 'ew-resize';
} else {
r.style.cursor = 'ns-resize';
}
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
}
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
}
function setupResizerEvents() {
document.body.addEventListener("mousedown", function (md) {
// Used to avoid cursor's flickering
const html = document.querySelector('html');
var target = md.target;
if (target.nodeType !== 1 || target.tagName !== "FLEX-RESIZER") {
return;
}
var parent = target.parentNode;
var h = parent.classList.contains("h");
var v = parent.classList.contains("v");
if (h && v) {
return;
} else if (h) {
// Change cursor to signal a state's change: begin resizing on H.
target.style.cursor = 'col-resize';
html.style.cursor = 'col-resize'; // avoid cursor's flickering
// use offsetWidth versus scrollWidth (and clientWidth) to avoid splitter's jump on resize when a flex-item content overflow (overflow: auto).
manageResize(md, "offsetWidth", "pageX");
} else if (v) {
// Change cursor to signal a state's change: begin resizing on V.
target.style.cursor = 'row-resize';
html.style.cursor = 'row-resize'; // avoid cursor's flickering
manageResize(md, "offsetHeight", "pageY");
}
});
}
setupResizerEvents();
body {
/* margin:0; */
border: 10px solid #aaa;
}
flex {
display: flex;
overflow: hidden;
}
/* flex-item > flex {
position: absolute;
width: 100%;
height: 100%;
} */
flex.h {
flex-direction: row;
}
flex.v {
flex-direction: column;
}
flex-item {
/* display: flex; */
/* position: relative; */
/* overflow: hidden; */
overflow: auto;
}
flex > flex-resizer {
flex: 0 0 10px;
/* background: white; */
background-color: #aaa;
background-repeat: no-repeat;
background-position: center;
}
flex.h > flex-resizer {
cursor: ew-resize;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
}
flex.v > flex-resizer {
cursor: ns-resize;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex-splitter</title>
<link rel="stylesheet" href="./src/styles.css">
<script src="./src/index.js" defer></script>
</head>
<body>
<flex class="v" style="flex: 1; height: 500px;">
<flex-item style="flex: 1;">Flex 1</flex-item>
<flex-resizer></flex-resizer>
<flex class="h" style="flex: 1;">
<flex-item style="flex: 1; background-color: aqua;">
<!--
The next section is an example to test the splitter when there is content inside a flex-item
-->
<section>
<div>
<label for="CursorCoor" style="display: block;">showCursorCoor: </label>
<textarea id="CursorCoor" rows="6" cols="50" wrap="soft" readonly></textarea>
</div>
<br />
<div>
<label for="boxInfo" style="display: block;">showBoxInfo: </label>
<textarea id="boxInfo" rows="6" cols="50" wrap="soft" readonly></textarea>
</div>
</section>
</flex-item>
<flex-resizer></flex-resizer>
<flex class="v" style="flex: 2; ">
<flex-item style="flex: 1; background: pink;">Flex 3</flex-item>
<flex-resizer></flex-resizer>
<flex class="h" style="flex: 1">
<flex-item style="flex: 1; background: green;">Flex 4</flex-item>
<flex-resizer></flex-resizer>
<flex-item style="flex: 2;">Flex 5</flex-item>
<!-- <flex-resizer></flex-resizer> -->
<flex-item style="flex: 3; background: darkorange;">Flex 6</flex-item>
</flex>
</flex>
</flex>
</flex>
</body>
</html>
Or see it on Codesandbox:
I hope it helps!
Note: There is also the new, basic resize CSS property, but it's only for bottom right corner dragging.
I did some research on this, and the first 3 framework-free, fully baked results I came across were, in order of appearances (untested):
https://daybrush.com/moveable
"Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable"
I love the look of things here, both visually and code-wise! Seems highly functional and extremely flexible as well.
See also: https://github.com/daybrush/moveable https://daybrush.com/moveable/release/latest/doc
UPDATE: I tried this one out, I actually would not recommend it. It's very complicated to use, poorly documented, and I'd rather write my own JS instead.
https://split.js.org
Looks nice, but it appears to only be for split panels specifically, no e.g. corner dragging. If that's all you want, this might be a good option.
See also: https://github.com/nathancahill/split/tree/master/packages/splitjs https://github.com/nathancahill/split/tree/master/packages/split-grid
https://jspanel.de
Not as aesthetic as I would like, but seems like it has a good set of functionality and options.
See also: https://github.com/Flyer53/jsPanel4
I also found this: http://w2ui.com/web/home https://github.com/vitmalina/w2ui
Longshot... I don't think this is possible but I've been shocked before!
I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?
Thanks!
I don't think people understand - My fault for rushing the question.
Here's code as an example:
#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}
I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.
I wasn't sure if this was possible, I assume not.
Thanks
A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/
i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.
<img src="http://placekitten.com/300/301" />aa
And apply the css
a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}
img{
visibility:hidden;
}
We can use a visibility: hidden way:
<img src="http://lorempixel.com/100/200/" />
CSS
a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}
Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/
JavaScript Solution
Procedure
To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:
Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.
JavaScript
$(document).ready(function () {
bg = $(".bg").css("background-image");
$("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
height = $("#faux").outerHeight();
$("#faux").remove();
$(".bg").height(height);
});
Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/
If you don't want to use inline CSS, you can use this:
$("style").append('.bg {height: ' + height + 'px}');
If you're looking for a way to make the background images fill all the space available then use background-size: cover
I think you're looking for something like this:
function setBackgroundImage(element, src) {
var img = new Image();
img.onload = function() {
element.style.height = img.height+'px';
element.style.backgroundImage = 'url('+img.src+')';
}
img.src = src;
}
Or, if you need to scale the images for the width:
function setImage(element, src) {
var img = new Image();
img.onload = function() {
var sizeRatio = element.offsetWidth / img.width;
element.style.height = (sizeRatio * img.height)+'px';
element.style.backgroundImage = 'url('+img.src+')';
element.style.backgroundSize = 'cover';
}
img.src = src;
}
Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.
You would use: display: block
Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.
CodePen Example
#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px;
/* generic height set in case there is no background image */ }
#ex-1 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 { background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 { background: url('http://www.bing.com/s/a/hpc12.png');}
<div id="links">
</div>
Here is the jquery. It will loop through all your images and set the height according to your background image
$(document).ready(function(){
$('#links a').each(function(){
var temp = $(this).css('background-image');
temp = temp.replace('url("', '').replace('")', '');
var newImg = new Image();
newImg.src = temp;
imageHeight = newImg.height;
imageWidth = newImg.width;
$(this).css('height', imageHeight);
});
});