I'm attempting to make a 2x2 grid with each cell 300x300px. Each cell has an image, which fades in and out, reloaded using AJAX ( jQuery to be precise) - creating a 4 image gallery over ajax.
All images are simply dumped into a folder, so there is no defined height or width of them.
Is there any way by which I can have the fill the space? eg, a portrait shaped image would resize to height=300, while its width might be smaller... and similarly for a landscape image ( width=300 with smaller height)? I'm trying to eliminate any resizing of the cells, because it is rather horrible to watch.
I"ll leave centering these vertically and horizontally till later.
Thanks for any help!
UPDATE:
I've pastebin'ed the current code
http://pastebin.com/Hz4fJk9p
Use max-height:300px; and max-width:300px;, assuming your image is not smaller than 300px in both dimensions to begin with.
Even if it's not CSS, I've found some interesting libraries for doing image resizing to fit the container:
http://plugins.jquery.com/project/myimgscale
http://code.google.com/p/jquery-imagefit-plugin/
Related
I am currently struggling at creating a website from a given design.
The design is created with InDesign and will be a one page website. The website has a width of 1280px.
The main problem is resizing, because the design has diffrent layers. Some images consume the whole width and some are centered with a given size and when I resize the browser the elements scale diffrently. Is it possible to put the whole page in a container and position every element absolute (as its done in the design) and then just resize the container. So the page would resize like a image. Are there some techniques in which I could read in?
Here the backlayer uses the whole width and the circle is centered with a given size. Now if I resize the window the beckground scales with a diffrent ratio then the circle.
Background-image now supports multiple images. You could try play around with that. But note browser support needs catching up.
EG
#example1
{
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
Depending on your layout, images etc, it may be easiest to just use an editor to combine into one image.
So I have a horizontal banner that I defined via a div. This div has a width of the full window and fix height of 500px for the time being. How can I scale an background image (2048 x 1283) to fill the div entirely without loss of picture quality? How would I do the same if the div height was relative to the window size, perhaps 25% or 50%? I want this to work when the window is resized.
Well you will never loss picture quality because you are keeping rendering the same picture over different sizes. You have to understand that responsive background its a hard topic since the picture will never display exactly how you want to, since different devices will have different display resolution, as example if you are seeing the same responsive image in your iphone portrait format (vertically) will look smaller in height than if you see in the same device but in landscape format (horizontal).
Any way heres is a question that can help you in your journey of responsive backgrounds Responsive css background images
cheers.
--- EDIT
if you want to achieve a full background http://css-tricks.com/perfect-full-page-background-image/ see this information.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
I'm creating a video and image module for a website and am having trouble with how to deal with the image output, video's are fine because they come out after encoding the same dimensions... however images can be any dimensions and landscape or portrait.
so I made a little js fiddle template http://jsfiddle.net/t8RnL/ the paramiters are, the box container need to be the same height and width. The container needs to hold a landscape or portrait image within..
I need the image to be positioned in the centre...
has anyone got a suggestions, I'm at my wits end..
If all you need is centering the image in the DIV container, check this fiddle: http://jsfiddle.net/t8RnL/2/
I'm writing a small program on the iPad whose task is to display the contents of an html file. I use document.documentElement.scrollHeight (pageYOffset etc.) to paginate.
My problem is with images. Sometimes an image gets cut in half such that 50% of the image is on page 1 the other 50% is on page 2. How can I fix this?
Thanks.
Why not style your images with CSS and use a percentage value so that it scales to fit the screen?
You might also want to checkout Responsive Design.