I have a image container(a div) with a set width and height.
now I got an image url from the backend and I need to put it in the container.
when the image is smaller than the container, I need to enlarge it to fullfill the container
when the image is bigger than the container, I need to center it in the container.
could this be done in pure CSS? or do I need to use JavaScript to do something?
You will need a mixture of css and javascript, here's an example I've created for you:
http://jsfiddle.net/7fUxw/1/
What about min-width:100px on the image, where the div is a width of 100px.
Related
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.
My tiles (divs) in the 15 puzzle are placed correctly, but all have the same image which is the top left corner of my background image. How can I set the div to take a specific position of the background image applied to it? Most probably a CSS question.
Yes, this is a CSS question, and the answer is background-position. See http://www.w3schools.com/cssref/pr_background-position.asp
use background position - it's a css property: http://www.w3schools.com/cssref/pr_background-position.asp
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;}
The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.