HTML/Javascript - I want to load images dynamically, and the images I'm going to load can be of varying aspect ratios.
I want the images to fit into a specific area of the containing div - an area 40% of the containing div's width and 80% of its height. Since they have varying aspect ratios, of course they will not always use up this entire area, but I want to resize them such that they don't exceed the bounds. But I don't know ahead of time whether I should specify the width or the height (and the partner attribute to auto) since I don't know what the aspect ratio of the images will be ahead of time.
Is there a CSS way to do this? Or I need to compute the required widths using javascript?
PS I only need to do this in Firefox 3.5!
Your server can find out the dimensions of the images and send this information along when you request an image. Failing that, you will need to wait for the image to load before its dimensions will be available to javascript.
However, there is another way. Request the image, telling the server the dimensions of the space you have. It can then generate a suitable version of the image and cache this, before sending the image that is already exactly the right size down to the browser.
Update
One other way, that may be acceptable to you is to set the container div like so...
.mydiv { overflow: hidden; }
Then set the image to be fixed in height and auto for width. This will cause over-wide images to be clipped on the left and right of the image. If this is acceptable in your case, then this is a very simple solution.
My solution was to provide a container div that would bound the object to the needed size:
#img_container {
width: 48%;
height: 80%;
}
Then for the image, itself I assigned max-width and max-height which are recognized by firefox:
#img_container img {
max-width: 100%;
max-height: 100%;
display: block;
}
This way, the image auto-adjusts itself at most to the width of the container, but keeps the correct aspect ratio. Hooray!
Related
I'm making a small review card project.
I got the functionality of the card and how I want everything placed. Problem is I want all the pictures to stay the same size without having to set media queries every like 150-200px
I know I can get the initial width/height of the images with no problem. But If I set the images to an initial size is there a way for me to then scale it from that initial size with say the viewport width or viewport height? They are all the same aspect ratio, so I found a size that works for all pictures as the initial size
For those looking for a similar solution I did a portion outside of the code as it made it a lot easier. I just cropped the photos and set them all to the same aspect ratio to start off.
Then I was able to set an initial width on my images to a pixel length.
Then use #media queries to keep them scaled properly for larger screens, I only had to do it for 4 different screen sizes to keep the layout looking proper.
Example:
image {
width: 300px
}
#media screen only and (width: 1920px) {
width: 800px
}
I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work
I have searched a lot and couldn't find an exact solution for my problem.
basically i have a page, which can be loaded in any div. All the height and width inside the body is set relatively. When i load the page into a smaller div, i want it to have the 100% size of the current body (the body of the page i am loading into), and it should be loaded fully into the div without any cropping/autoadjusting, and it must be scrollable.
The only solution i came up with is hardcoding one single dimension inside the main page, but i do not want that, coz it should all be dependent upon the resolution of the screen and current zoom factor.
P.S i do not know what sample code i should give, nor what further details are required. please feel free to ask me for anything.
P.P.S i want to see if its possible to do without using js/jquery
Thanks.
If i understood correctly, you could use viewport units vw and vhto set the size of your page equal in relation with the current viewport regardless of the <div> into which it's loaded.
1vw = 1% of viewport width
1vh = 1% of viewport height
for e.g.:
body{
width: 100vw;
height:100vh;
}
Browser support of there units #caniuse.com
I'm relatively new to all of this and have been working on a page for the last week. I've found this site to be very useful so far but I can't seem to get my page to dynamically fit entirely on the browser window vertically. I want it to shrink the elements so that it all fits in the browser without a vertical scroll bar. The reason for this is simple, it will be a landing page that is mobile app inspired, press the button and it will take you to where you need to go. However, users will have different screen sizes/resolutions, so the page must be fluid.
I have managed to get the page to shrink according to the width of the browser, as demonstrated here (jsFiddle Demo).
container {
padding: 1% 1%;
width: 80%;
height: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
/*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
As you can see, all elements shrink dynamically based on the width of the browser. However, when viewed on a 1024x768 screen, the bottom row of "buttons" is half cut off by the browser and the user has to scroll to see the rest.
I have tried a few solutions on this site but cannot seem to get it to work. Can anybody here help me to get it to adjust dynamically to the browser's width AND height?
To better illustrate what I would like, this is the effect I would like to see dynamic resizing example
Here is an image that shows exactly what my problem is Difference in Resolution http://img404.imageshack.us/img404/5840/resolutionissue.jpg
Note that the spacing between the buttons shrinks due to the percentage spacing but the images will shrink to fit if the window is adjusted horizontally only. I need it to squeeze the whole thing into the browser window.
To ensure that your container and child elements (where required) fill the screen vertically you need to ensure that you are also applying a 100% height value to the overall parents of these elements. In your case I would apply the following rule to your css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
This would then cause your container to adapt to 100% of height of the browser window (as container is the child of your overall body which is a child of the html tag). However, as you have applied padding you will still see the vertical scroll bar. You therefore need to ensure that you reduce the height % of your container element in relation to the padding / margins that you apply. In your case as Kai Qing suggests above you should change your container height to 98%.
I am so confused about background image in body element.
What is the best way for setting a background image for the body element in xhtml (for different monitors and resolutions)?
I mean, when you design a background (for example 1024*768) and put it in the body element with background rule, so we have some problems in different resolution or on another monitor (so wider than designed).
How can I solve this issue without changing my picture with Photoshop?
Shall we do something with JavaScript or jQuery?
I think you want to resize your background so it stretches and and always shows fullscreen.
If that is the case, you can use supersize: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
Hope this helps you
The most common practice is to design a larger image, considering that the most relevant area is the 1024 wide center area, and the rest is just to fill the page when the user is using larger resolutions.
As Marcel Korpel wrote, use the background-position property in css to apply align center.
It sounds like you need to not only use css to place the background-image, but also then to size the containing div to match your expectations.
body {
background: url(path/to/image) no-repeat center center;
width: 1024px;
height: 768px;
}
Up to version 3.1 in css you can use the calc function. With this you could calculate the "correct" filename of the background image fitting the individual monitor size and resolution.