I'm creating a slideshow with jQuery Cycle, and I need to be able to resize the images in the slideshow responsively with css. So far, cycle has been so controlling of the width and height of the images that I haven't been able to do it. I have been able to achieve the images resizing according to window width when I refresh the page, but the images won't dynamically resize when resizing the window. I'm trying to work out a solution in Javascript, but I'd really like to be able to get away with pure css.
jQuery Cycle is setting widths inline on the <img> tags. That's the first problem. I would try removing that, it looks like the options for Cycle has this value slideResize, try setting that to false or 0.
The next step would be setting a max-width on the container, and width: 100% on the imgs.
Just a suggestion - but you'll probably want to use something like JavaScript (or an AJAX service or something) to handle this because if you were to handle resizing the images within the browser that is going to put an incredible amount of strain on the browser to handle all of the resizing and scaling.
You may want to target specific resolutions and serve the images based on the "closest" viewport size accordingly.
you can set the width or height of the image related to a container
.container{width:200px}.container img {width:100%}
Hope this helps!
Set the img elements width to 100% and height to auto to take aspect ratio into account. If you don't want the image to be 100% of the browser, add a container element.
Your best bet to make a image responsive, this is without it being inside a container btw.
img {
width: 100%;
height: auto;
}
Now, it will stretch to the width of the page, but if its contained it will stretch to the width of the container, the thing to try is, making the container grow and shrink as well.
Related
I have an issue with my web page.
Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.
Edit: The container div has the overflow: auto property.
The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it's taken to a laptop, the last 1-2 rows become 'hidden' due to html overflow.
If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.
Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?
The easiest and probably the fastest way to do it would be using Javascript.
If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.
When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:
function resizeMain()
{
$('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}
// size it on load:
$(function(){
resizeMain();
}
// and size it on resize
$(window).resize(resizeMain);
Of course, many ways to optimize this, but that's the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.
Finally, you need Overflow: auto; on our tabular box
in the div that is height:90% put overflow: auto or overflow: scroll. That'll add a scroll bar to that div only.
I am currently working on a webpage and I have achieved fitting it in the whole browser window by using percentage(%) values in the width and height properties of my css. The problem now is that when I resize the window, everything gets scrambled and distorted (e.g labels,links, etc.) Is there a way to have a minimum height and width so as when the window is resized, there is a limit those properties to prevent the layout being distorted?
Thanks is advance!
You actually answered the question yourself. You can use the CSS properties min-width and min-height to set minimum width and height, respectively, for a block level element like a container.
A better solution would be to use responsive design, though, which will continually adjust itself as the window grows and shrinks.
Check out the css properties min-height:
http://reference.sitepoint.com/css/min-height
and min-width:
http://reference.sitepoint.com/css/min-width
You may also look into a simple css framework like StackLayout:
http://stacklayout.com/
I've an gallery with different size of images. Is there any solution to crop them during display?
I've tried to set style height: xxxpx but it looks awful (with width too). This images display from another sites, so I cant just download them and crop :(
You can crop an image by putting it inside an
overflow: hidden;
div.
Heres a JSFiddle example Cropped Image, of course you wil probably want to use same javascript to centre/position the image and not simple setup magin numbers in the example I've done, but still it shows how to crop the image.
Here is a jQuery plug-in that should do the trick:
http://odyniec.net/projects/imgareaselect/
You could also just set the width to a pixel measure in the html or the css and leave the height, or vice-versa, depending on whether you need them the same height or same width. Then they will be reduced but not distorted... obviously, if you need to crop to a set height and width, this won't work, but it will give you columns or rows that match in width or height.
I'm having trouble centering an image that's larger than it's parent element. I've set the min-width and min-height to 100% so that the picture will always fill up the parent element.
The visual problem appears when a image doesn't have the proportions of the parent element. The image is getting cropped too much on the right or bottom side.
I guess i could bypass this problem when i just center the images, so the most important part of the picture doesn't get cropped. Is there a way to center the image that's larger than it's parent element? (Without changing the parent element ofc)
I would rather see a css oriented answer instead of javascript because of performance issues when traversing a lot of images in the DOM.
Here's a part of a screenshot of two images contained in a parent http://d.pr/kEcb. The images sizes are ok, but i cannot get them centered
Try something to this effect.
img/div/whatever {
left: 50%;
margin-left: **Half of image width**
}
Use overflow property for the parent div
if you want to view the image coming out of the div use visible else use scroll
The simplest css solution would be to set the image as the background-image of the parent,
with {background-repeat:no-repeat;background-position: center center;}
So I've got a page that shows an image with some absolutely positioned text on top of it.
I want to write a print style sheet for it so that:
the image is resized to fit the width of the page
the text is repositioned and resized to maintain relative position and size with the image behind it
So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?
And yes, this question might be more appropriate for DocType, but I've yet to get any help over there.
My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.
To fix it, all I needed to do was set overflow: none.
The overflow: auto was what was making it print like
(source: github.com)
I think you could happily leave it to the printer driver if you trim off the whitespace around the images, and then replace the margins on-screen with css, and the remove it again in a print-media stylesheet. Buiding-in the page margins is going to cause problems.