I try to make an image's height to always be the 1/4 of the window's height, based on responsive design and fluid images
The image is a random image picked up by the database, so I dont know if its gonna be elongated or not.
This is what I got untill now
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(based on the anser by migf1, from here , sorry its Greek)
And that's it. Works fine , if you just open a browser and the browser expands to the whole screen.
Problems
-I simply cannot align the image to the center of its container. I tried margin, padding, float, position:absolute. Nothing works
-If I start scaling the browser's window (simply dragging one corner) the image's height does not "follow". Resizes, but not actually in 1/4 of screen's height.
-If I open a browser and it's not expanding to the whole screen, the image's height not scale to the 1/4 of screen's height.
Any advise?
Thanks in advance
You can use css property #icon{ text-align: center;} on the container DIV to center the image horizontally within the DIV. Look at: http://jsfiddle.net/2vxmX/
Related
As you can see in the picture, I have a problems with my container in my slideshow. The gap between content and slideshow gets bigger the smaller the window size gets, which is what I want to avoid.
On resizing the window width, the content container shall change the height automatically pixel for pixel. So it gives the website a nice flow and there is no big space between the slideshow and the content on different screen sizes.
I made a JSFiddle now: https://jsfiddle.net/joggal/fk3v7aau/2/
Hope it shows my problem: the container is absolute positioned but i want it to resize so the gap between the slideshow and the container with the rows isn't too big / small. I want the container to be directly below the slider.
I tried to fix it with #media in the CSS, but this isn't the best solution at all :(
I hope you can help me :D
First get the height of the slider in window resize function.
Then append it to the image.
$( window ).resize(function() {
var SliderHeight = $('.slide').height();
$( ".img" ).css('height',SliderHeight);
});
I basically have one smaller div with overflow set to auto. Inside I have another, big div of the size of the grid and inside this div I have canvas element, that should have the size of the first smaller div.
What I want to achieve is to have the canvas always shown in the smaller div, no matter where I scrolled.
I set the position of canvas to relative and the top and left attributes are set as scrollTop and scrollLeft in javascript whenever I scroll. This way my canvas will have always fixed size ( no performance issues) and in javascript I can compute the position in which I am scrolled in.
var s=document.getElementById("scrollable");
var c=document.getElementById("canvas");
c.width=400;
c.height=400;
var maxw = s.scrollWidth;
var maxh = s.scrollHeight;
s.onscroll = function(){
c.style.top = s.scrollTop + "px";
c.style.left = s.scrollLeft + "px";
}
The problem I am having is that when I reach the end of scrolling, canvas seems to overflow the big div (thanks to size of the scrollbars I believe) and thus the big div's size is increasing and scrolling continues while it shouldn't.
Link to simple example: http://jsfiddle.net/kwynt/1/
I think you are right about the scrollbars causing the problem. they shrink the viewable area of your div, so the canvas is always overflowing over the right and bottom (since you keep moving the canvas down, you can never scroll all the way there). You can add this to your "wrap" div to fix:
overflow:hidden
http://jsfiddle.net/a3XPB/
I have a block that is of size 180x270 that I need to show images
The image sizes can vary, and I want to make sure it expands or shrink so that the smaller border (either height or width) matches the block, whereas the larger border gets cropped while preserving aspect ratio.
Examples are the following:
- An image of 360x600 gets resized to 180x300, and I crop the height from 300 to 270
- An image of 100x135 gets resized to 200x270, and I crop the width from 200 to 180
Basically I want to make sure there's no white space as I expand/shrink the image while preserving aspect ratio by cropping the section exceeding the block
Any suggestions on css or javascripts that can handle this?
It seems like you're looking for background-size:cover, which works when the image is a background-image
background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;
Demo
Zach's solution is best if you can use a bg-image for the task, but if you need to use an <img> tag (there are cases when this is advised), then you need javascript to calculate the image's aspect-ratio and determine whether it is more squat or more vertically stretched than the target frame. Then there's a little CSS as well:
JavaScript
//obtain a dom-reference for the image using getElementById
//or by some other means depending on what you know of its HTML
var img = document.getElementById('some-image-id')
var aspectRatio = img.clientWidth/img.clientHeight;
//if the img is more squat, set it's height equal to the target frame's height
if(aspectRatio > (270/180)){
img.style.height = 180 //image is
}
//otherwise the image is more vertically stretched
// so set the img width equal to the target frame's width
else{
img.style.width = 270;
}
This will set the
CSS
Finally, to center an over-sized image inside a wrapper vertically and horizontally, regardless of how the fit was made:
.wrapper{
position:relative;
display:inline-block;
}
.wrapper img{
position:absolute;
top:-9999px;
right:-9999px;
bottom:-9999px;
left:-9999px;
}
So I have a div that is positioned in the middle of my page(centered horizontally but not vertically), and it scales to fit the device width until the device becomes larger than 600px. After that the div remains at 600px wide and stays centered in the window no matter how much larger it becomes.
What I would like to do is position a background image so that it is always located at the bottom left of this scaling div (background of the page not background of the div). I believe I will need to use javascript to do this, but I'm not exactly sure. I think I might need to do something like:
var divWidth = document.getElementById('theScalingDiv').offsetWidth;
var pageWidth = document.clientWidth;
var xCoord = (pageWidth/2) - (divWidth/2);
Then I could use absolute positioning to position the background image according to the height of the scaling div and the calculated xCoord. Does this sound like it would work?
You could use fixed positioning on the div:
.divtoposition {
position:fixed;
left: 0;
bottom: 0;
}
http://jsfiddle.net/7v5L4/
My website's background is a huge image that covers the whole webpage, how can I make it so that, we detect user's screen size and change the background image accordingly?
Say for example, my background image is 1x1px, if user screen is 2x2px (this is just an example, nobody has this kind of small screen), I want stretch my background to fit 2x2. If user screen is say, 0.5x0.6px, then I want my background to be shown only its 0.5x0.6px part, not the whole 1x1px.
Use an image tag as the background give it a 100% for width and height, and set it behind all of the content with z-index give it absolute positioning and set its top and left where you need it to be.
<img src="yourimage" width="100%" height="100%" style="z-index:0"/>
Live Demo
In CSS3, we have a new property called background-size:
body {
background-size: 100%;
}
looking for this?
<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div>
You can detect the users screen size and do it, also you can attach a event handler to do the same when the window size is modified.
$(function(){
$(window).resize(function(){
var windowW = $(window).width();
var windowH = $(window).height();
//Using above variables you can deside the size of the background image to be set
}).resize();//Trigger the resize event on page load.
});