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.
Related
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
so i have this simple problem with Bootstrap but i have not found a solution to it and it goes like this: i want to have a carousel in my web page and i took the code from Bootstrap's official web page and i want to display 1200 x 400 images but if an image i want to display is not that size, it could be smaller or it could be bigger, what should i do to make that image fit on the space if it's not the size i want... i have tried with html specifying a width and a height but it doesn't work. Maybe this question is a little bit silly but i have not found a way and also i have tried to change the size of the image but it was unsuccesfull.
Thanks for the answers!
It is often recommended for slider to keep all your images same dimension. But if there is no way left to do so, you can make CSS adjustments.
For an example:
You can give same dimensions (height and width) in CSS for all those images. and use object-fit: cover; so that image does not squeeze.
I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images.
Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.
My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...).
I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?
Thanks.
You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.
When adding an new image, choose a class that fit your need.
If you need more precision, create a set of 10 class instead of 5 !
Edit : as promised, the code :
.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}
So the image :
<img class="size2" src="..." />
will be 20% wide.
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.
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/