I have multiple images that I pull from facebook. They are placed in a scroller. When you click on the image a dialog appears with the actual image (The images in the scroller are thumbnail size, what you get from a facebook query with src_small)
I cannot determine the size of the images before I get them. Some are huge and others very small. To account for this (so all images fit in the dialog and are a reasonable size) I tried this:
/*
* Image in the dialog div
*/
.DialogImagesBig
{
position: relative;
width: 95%;
top: 0px;
left: 10px;
}
/*
* Firefox only
*/
#-moz-document url-prefix()
{
/*
* Edits images for FF
*/
.DialogImagesBig
{
height: 95% !important;
width: 95% !important;
position: relative;
top: 0px;
left: 10px;
}
}
But it actually makes some images bigger then they are (Big images are smaller, but small images are bigger and pixelated). Why is that? How would I fix this so that all images fit in the dialog and are not pixelated?
Edit I have been told that I need to use Javascript (or Jquery?) to get this done. How would I go about doing that?
A width/height of 95% means 95% of the parent element's width/height, not 95% of the image's original size.
You can get the image width/height by doing this:
var img = new Image();
img.src = _image_src_
img.width // returns width
img.height // returns height
img // returns <img src="_image_src_" />
You can compare those values with the width/height of your dialog and do all the resizing you need, i hope this can help.
Example:
if (img.width > 100)
img.width = 100
$("#image_container").html(img)
You could try this sort of thing:
h = $('#theimage').height();
w = $('#theimage').width();
if(h > 400 && w < 500) {
$('#theimage').height(400);
$('#theimage').width = w / (h / 400);
}
...
...
same for other comparisons, to shrink it down appropriately. I think the math is right there...
Related
How can I resize of a image base on screen size. Example:
I have a tag (width:1349, height: 449) and a image in div (width:78, height:78). When display image in div I fix for width of image is 60 and height is 60. I saw in mobile screen then the size of image still keep state so now I want to image display automatic resize base on screen example: in iPhone 4 the image have size (20x20) or percent of it in the screen. How can I use the formular for calculate it? This is my code jquery for calculate it.
var mw = $("#c").width();
var mh = $("#c").height();
console.log();
var img = new Image();
img.src = './img/photo-circle.png';
var wdImg = img.width;
var hiImg = img.height;
var ratioImg = wdImg/hiImg;
var ratioDiv = mw/mh;
if (ratioDiv > 1) {
var newwd = wdImg*(mh/hiImg);
alert(newwd);
} ;
You should be using percentages to achieve dynamic resizing of your elements. Then, as long as the parents are also dynamically resizing, their children will as well. For example, width: 30%; instead of width: 100px;
use the css unit vh and vw
each unit is worth 1% of the screen size
http://caniuse.com/#feat=viewport-units
example:
.item {
height: 20vw;
width: 20vw;
}
If the screen width is 100pixels, .item would be 20px by 20px
Simply you can use a bootstrap class called "img-responsive" at your img tag .
That's all , It will be responsive on any screen.
I have a large banner that contains a slider on my site, the position is absolute, because the banner is so wide when I look at it on smaller screens , all you can see is the left side of it.
I was originally using media screen only to adjust for mobile and various screen sizes, I would basically apply a different left negative left position for every size but this seems inefficient and also it doesnt seem to work perfeclty as I need to take into account every possible size for it to be neat.
Then I thought about javascript, but unfortunately I dont know much of it at all. Im wondering is there is a simple bit of code that I could apply to a div in js that changes its left position automatically based on screen size.
Or even any suggestions based on media screen only would be great thanks. My big issue with that is not knowing what left position I should apply to what resolution.
If you need more info let me know. Thank you
Adrian
I wrote an article a while ago with some useful snippets, this is one of them:
This utility is a simple approach to set width breakpoints when
working on responsive designs. It's a quick way to relate CSS media
queries in your JavaScript code as you go.
function isBreakPoint(bp) {
// The breakpoints that you set in your css
var bps = [320, 480, 768, 1024];
var w = $(window).width(); // or window.innerWidth with plain JS
var min, max;
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0;
max = bps[i];
break;
}
}
return w > min && w <= max;
}
Then in your script:
if ( isBreakPoint(320) ) {
// breakpoint at 320 or less
}
if ( isBreakPoint(480) ) {
// breakpoint between 320 and 480
}
I'm not sure why you need to absolutely position a banner, but assuming you need to, if the banner is an image and resizable you can use method 1.
If it has to be in its original pixel-perfect size, use method 2 to center it in the screen.
method 1
#banner {
/* Your normal banner code */
position: absolute;
/* positioning etc. */
}
#media (max-width: {banner-size}px) {
#banner {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
method 2
#banner {
position: absolute;
top: 20px; /* anything you want */
left: 50%; /* you can adjust to off-center */
margin-left: -{width/2}px;
}
I am using an image as the background for my site. It has a black/white gradient, and is 1px wide.
The CSS:
background-image:url('../image/gradient.png');
which makes it repeat itself. The height of the image is 2000px.
Is it possible to change the height of the image dynamically, so it fits all page sizes: If the height of a page is less than 2000px, the height of the image should be smaller, if the height of the page is bigger, the image should be bigger.
Thanks in advance
I have tried various in-browser gradient techniques, and they dont seem to work the same on all browsers.
I usually approach this problem in one of two ways.
If you can use CSS3, then use CSS gradients (I always find http://colorzilla.com/gradient-editor/ a good choice to play about with gradients), you can then set this to be 100% height of the window.
If CSS3 isn't an option, i usually just pick a height, say 500px, and make a gradient for that. Then, since gradients typically go from colour A to colour B, just set the underlying background colour to match colour B and the gradient will work similarly on all monitors.
Assuming a gradient going from blue to black:
body {
/* ensure body always fills viewport */
min-height: 100%;
/*gradient fades to black so set underlying BG to black*/
background: url(/path/to/gradient.gif) repeat-x #000;
}
}
Maybe am not getting the right context of your question, but this can be do it easily with somethin like
#SomeImg.src {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Resize this page to see it action: http://css-tricks.com/examples/ImageToBackgroundImage/
With CSS3 you can use background-size: cover and there are some other techniques discussed here.
You could create several images with varying heights and dynamically match the closest image size. If you do this you'd need to tie into the window.resize event to update the image if the user resizes the window.
window.onload = setBackgroundImage;
window.onresize = setBackgroundImage;
function setBackgroundImage() {
var winH = 500;
if (document.body && document.body.offsetWidth) {
winH = document.body.offsetHeight;
} else if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winH = document.documentElement.offsetHeight;
} else if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}
if (winH > 400) {
document.body.style.backgroundImage = "url('../image/gradient800px.png')";
} else if (winH > 800) {
document.body.style.backgroundImage = "url('../image/gradient1000px.png')";
} else if (winH > 1000) {
document.body.style.backgroundImage = "url('../image/gradient1500px.png')";
} else if (winH > 1500) {
document.body.style.backgroundImage = "url('../image/gradient2000px.png')";
} else {
document.body.style.backgroundImage = "url('../image/gradient400px.png')";
}
}
I don't think the solution is very pretty, but it should work.
I have concocted a little script here out of bits and pieces I have found and scraped together, but I need a little help to add an extra function to it,
First of all - this is what it is doing for me at the moment:
It resizes and crops/letterboxes an image to completely fill a div
which is a % height and a % width – it keeps doing this whenever and
whatever window resize
It keeps working seamlessly as the window is resized
The image is filling 100% the area the div covers - left to right
and top to bottom.
The image is not being squashed or stretched - just being cropped
or is overflowing.
The image is kept as small as possible, so whatever the resize -
you can still see either the very sides OR the very top and bottom of
the image.
It seems to be OK across IE9, Fire Fox, Oprea, Chrome, and Safari
over XP and 7
All of these things are very important to me, please don't tell me that all i need is:
<img style="width : 100%;">
This is so much more than that. It's not too easy to explain but check the demo and drag the corner of the window around and that'll be worth 1000 words...!
Now, what I want to add:
All it is, I’d like the letter box to centre on the image.
When the div is a very tall portrait or a very flat landscape I’m just getting the top or just the left hand side of the image.
I’d like the centre of the original image to stay in the centre of the resized div.
I’ve tried a few things but have drawn a blank. I’m sure the script could feed a minus top: or left: into the style but it seems if I get too many div’s in div’s IE doesn’t like it, or what am I doing wrong?
Thing is I don’t really know how to wright this stuff, I only steal bit and bobs and splat them together…
And finally the demo
And the script:
<html>
<head>
<title>test</title>
<style>
#imgarea {
position:absolute;
right:0px;
height:75%;
width:70%;
top:25%;
}
</style>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var area_width = window_width * 0.7
var area_height = window_height * 0.75
var height_ratio = image_height / area_height
var width_ratio = image_width / area_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
else
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
}
</script>
</head>
<body onresize="resizeImage()">
<div id="imgarea">
<img onload="resizeImage()" src="f/a.jpg">
</div>
</body>
</html>
Thanks Very Much For This.
I'm not quiet sure if that's what you're looking for, but let's try this:
*upd: the wysiwyg is not working on comments at this moment, so sorry for messy code snippets.
1.Position the div#imgarea relatively. You can then float it to the right, to replicate your right:0px declaration. Don't forget to hide the overflow, to ensure that 'letter-boxed' parts of the image stay hidden.
#imgarea {
position: relative;
width: 70%;
height: 75%;
float: right;
overflow: hidden;
top: 25%;
};
Some user agents will add paddings and margins to the body element, thus preventing the image container to slide all the way to the right. Reset those, to get rid of the gaps between the container and the edge of the browser window.
body {
margin: 0;
padding: 0;
}
As for the image itself, position it absolutely.
img {
position: absolute;
}
And finally javascript. To center the image, you need to calculate what this width/height=auto sums up to, and then reset left/top attributes respectively. Your if function needs to be adjusted just a bit; leave your variables as is:
if (height_ratio > width_ratio) {
var newWidth, newHeight, newTop;
newWidth = area_width;
newHeight = image_height/width_ratio;
newTop = -(newHeight-area_height)/2;
document.images[0].style.width = newWidth;
document.images[0].style.height = newHeight;
document.images[0].style.top = newTop;
document.images[0].style.left = 0;
}else{
var newWidth, newHeight, newLeft;
newHeight = area_height;
newWidth = image_width/height_ratio;
newLeft = -(width-area_width)/2;
document.images[0].style.width = newWidth;
document.images[0].style.height = newHeight;
document.images[0].style.top = 0;
document.images[0].style.left = newLeft;
}
I hope that if this doesn't solve the issue completely, it at least sends you in the right direction. Good luck.
I'm not sure if this will work exactly, but may get your started. I had a client request a radial gradient be fixed to the left and right of a website's main ontent section. The page was set up with dynamic widths and I had a heck of a time getting one solid image to work, so I came up with a quick css solution.
#bgHold #gradLeft{
width:248px;
height:975px;
position:fixed;
right:50%;
margin-right:399px;
background:url("../images/gradLeft.png") top center no-repeat;
}
margin-right is half of the content block's width. So basically, the gradient is fixed on the page at 50% from the right, then shoved left 50% of the content box making it line up with the edge of the content. The same idea applies to the other side.
Now, with your situation, perhaps you can set right:50%; and margin-right:imgWidth/2?
This might not be a simple question, but I try my best.
I have this example site: http://lotvonen.tumblr.com/
I have a little piece of javascript that automatically calculates the height of the inner browser window and sets that number as image wrapper div's height. Height of the image inside the wrapper is 100% of the wrapper, so that I get nice, full screen images on all normal screen sizes.
This works wonderfully on screens that are more wide than tall (desktops, laptops, etc).
But!
With screens that are more tall than wide (smartphones, iPads etc), the images get clipped from sides. I don't want that, so I have a temporary solution to have media query assigning height to auto and width to 100%, when browser screen max-width is 1024, so that no clipping occurs. But it's not a very good solution, and breaks at certain resolutions. It also destroys my JS with lower resolutions (eg. 800x600).
Here's the JS:
<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;
for (var i = 0; i < size; i++) {
var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>
and here's my CSS:
.img {
max-width:100%
}
.img img {
width:auto;
}
.img img {
height:100%;
}
#media only screen and (max-width: 1024px) {
.img {
height:auto !important;
}
.img img {
height:auto !important;
max-width:100%;
}
and here's the div:
<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>
How do I get it so, that when the browser window is more tall than wide (eg. 720x1024), the images adjust by width, and when the browser window is more wide than tall (eg. 1024x720) the images adjust like they do now (by height, with the JS).
Is this possible at all? Is there a simple CSS fix to this or do I need to mess more with JS?
Thanks in advance!
You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.
Example
CSS
.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }
JavaScript
var getAspect = function(){
var h = window.innerHeight;
var w = window.innerWidth;
var aspect = w / h;
var 43 = 4 / 3;
var cssClass = "";
if (aspect > 43) {
cssClass = "widescreen";
}
else if (aspect === 43) {
cssClass = "43";
}
else {
cssClass = "portrait";
}
$("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};
var checkAspect = setInterval(getAspect, 2000);
I would suggest getting the aspect ratio first in javascript. Use window.innerHeight and windows.innerWidth, and make the necessary division. Then, make this a condition. When the screen in wider than its height, set the image in css to width: 100%. Otherwise, set height: 100%.