Is there a way I can resize, crop, and center an image using html/css only? (img tag or css sprite)
For example if I have a 500x500 pixel image,
I want to resize that to a 250x250 pixel image
I want to make the actual visible image to be 100x100, but still have the scale of a 250x250 sized image.
I want the center of the image to be at a location x,y.
Is that possible with only html/css, if not, how do you propose I go about it with javascript?
Edit - 動靜能量:
For (2), say my scaled image is now 200x200, and I want my visible image to be 100x100: So I guess what I mean is I want the scale and resolution of the image to be 200x200 but I want the visible image to be 100x100 or in other words the visible image would be at coordinates x,y: 0,0; 0,100; 100,0; 100,100; of the 200x200 image. Sorry, but I'm not good at explaining this.
Update: an example at http://jsfiddle.net/LTrqq/5/
For
You can just use CSS's width and height for the <img> element
It can be done by (1), and place this image into a div, and position: absolute, with a desired top and left, and place it in another div with position: relative, and this outer div can have width: 100px, height: 100px, and overflow: hidden
same as (2), with the desired top and left value.
We need the position: relative for the outer div in (2), because we want the inner div to position relative to this outer div, rather than relative to the whole document.
For the top and left, it is like top: -50px; left: -50px as an example.
Just done this off the top off my head but it should be nearly there if not completely accurate. The -X and -Y coordinates are what get you to the crop offset. So for example if you want to crop from 20x30 you'd make them -20px and -30px.
<style>
#crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
#crop img { position: absolute; left: -X; top: -Y; }
</style>
<div id="crop">
<img src="500x500.jpg" width="250" height="250">
</div>
If you want to center it though and you know the size of the image in the crop container you could use the following CSS instead:
#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }
125px is half of 250 so it should make it central.
You can definatley size the image to any dimenson then place it in a div and hide the overflow to acheive a crop look. However if you actually want to crop the image so that say someone wants to download a copy of it cropped and scaled check out: http://deepliquid.com/projects/Jcrop/demos.php
But if you can at all try PHP, http://www.binarymoon.co.uk/projects/timthumb/
is very easy to use, just put it on your server and point your img tag src to it.
example: < img src="/timthumb.php?mycat.jpg&h=250&w=250" />
Related
Okay, so I have a simple one page website, that has content in div at top, and then an image at bottom. This image needs to be fixed to bottom, and it needs to automatically resize to fit under the div above.
Any ideas on what would be a good way to do this? If I just set the image to:
img {
position: fixed;
bottom: 0px;
}
it works at first, but on smaller screens, the image just covers the div above.
Setting max-height on image doesnt work either, as the div above the image sometimes covers 40% of the screens, and other times it covers 80% of screen.
Any ideas at all on what else I can try?
Try this:
img {
position: fixed;
bottom: 0px;
height: calc(100vh - 50px); # replace 50px with your "div above" height
}
I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.
Both images scale properly, and the left position works so far, but not the top position.
img {
max-width:100%;
}
#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
}
I have found some questions with answers that suggest:
Vertical Alignment or Positioning with Javascript
I've also looked into .position() and .offset(), not sure if either would work.
I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.
Here is my jsfiddle:
http://jsfiddle.net/melissadpelletier/xBu79/21/
I'm not sure exactly what you're trying to do with your images, but you could create a new smaller image (green dot) with the same aspect ratio as your background image, and have the dot placed where it needs to be within that aspect ratio. Then stretch the width of that to be 100% and the two images are basically overlapping, but the top image (smaller image) has a transparent background. Not sure if that all makes sense, but I made a new image and did the fiddle thing, which I'm new to: http://jsfiddle.net/ydack/
img
{
width:100%;
}
#dot
{
width: 100%;
position: absolute;
top:0;
left:0;
}
#dotImg
{
top: 0;
left: 0;
width: 100%;
}
I mistakenly placed the green dot's position based on the black outline, not the full background image, so the dot is slightly up and right of where it needs to be. BUT, the position is maintained while re-sizing the window. Hacky, but it could work!
You are definitely gonna need some javascript for this. What you can do is calculate the height and width of the image whenever you resize your browser window. Then simply use some math to calculate the position of the dot relative to those dimensions.
var height = $('#image').height();
var width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
$(window).resize(function() {
height = $('#image').height();
width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
});
Try this code: http://jsfiddle.net/LimitedWard/FFQt2/3/
Note that you will need to also resize the dot according to the height/width of the image if you want it to always fit inside that box.
Edit: after further investigation, it is possible to do this in CSS; however, it's a lot sloppier because the dot doesn't follow the image if the window is too wide. This jQuery solves that problem by using pixel-based positioning.
http://jsfiddle.net/sajrashid/xBu79/24/
plenty of errors mainly not closing tags
<div id='background'>
<img src='http://i.imgur.com/57fZEOt.png'/>
<div id='dot'>
<img src='http://i.imgur.com/yhngPvm.png'/>
</div>
</div>
I am trying to create a responsive design for my app.
I have a big background image and it will show the full size when user has large screen and only show partial if user uses small screen.
I want to place few elements on my app with absolute position but the problem is I can't lock their top and left value because the screen size changes.
I have something like
css
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
}
#element{
position: fixed;
z-index: 5;
top: 50%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}
html
<div id='background'></div>
<img id='element' src='test.jpg' />
How do I keep the position of the element on the same spot when user has small screen? Thanks for the help!
When using position: absolute, you need to make sure that it has a parent with a position attribute other than the default (which is static). If there is no such parent, the document is the effective parent. For your example, I would advise making the img#element a child of div#background like so
<div id='background'>
<img id='element' src='test.jpg' />
</div>
and then adding position:relative; to the #background css style
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
position: relative;
}
The reason relative is used, is because it doesn't take the element out of the document flow (like fixed or absolute would) and as long as you don't specify a top, left, 'bottom', or right attribute to the parent (#background in the case), it will stay in the same location as it would with default positioning.
Edit:
I don't think this will work out of the box for you. You need to figure out how to make the image's width dynamic as well. You can either give it a % based width or use media queries.
Edit 2:
Ia also just noticed you have position:fixed for img#element. Change that to position:absolute. that will make it so that it is positioned relative to the position:relative parent rather than the window.
Consider making a javascript function that calculates the screen width. After that add margin-left to #background equal to ( screen width / -2 ). Make #background width & height - 100%
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}
Is it possible to place 1 DIV inside another DIV and have the DIV inside have a larger width and height than the DIV it is contained within?
Sounds like a riddle....
Basically I want to have a container that the user can set the width and height of. They will have also selected and image, cropped it and resized it using jQuery. The image will be the background of the container, however due to the fact that the background image could be made bigger than the container I want it to be possible for the background to be a DIV that can expand beyond the height and width of its container - To crop the image if you like.
Do able?
Yes, if I'm understanding you correctly
the container would be relatively positioned, the div "inside" would be absolutely positioned inside it -
the absolute positioning co-ordinates and getting the image centered would be done something like this, at default,
#inner {
position: absolute;
top: 0 ;
left: 0;
right: 0;
bottom: 0;
background: url(theimage.jpg) no-repeat 50% 50%;
}
this should center the image in the user sized container
then the "cropping tool" would be able to manipulate the co-ordinates (in an equal measure I presume) either + or - those 0 values, -, negative, ones will allow it to expand outside the "outer" container
$('<div>').attr('id', 'innerdiv').appendTo($('#div'));
CSS
#div{
height: 100px;
width: 100px;
background: green;
}
#innerdiv{
height: 200px;
width: 200px;
background: red;
}
HTML
<div id="div"></div>
http://jsfiddle.net/bKetM/
A background image will be 'cropped' by default. For example, if I have a 500px by 500px div and then I put a 1000px by 1000px image as its background then it will show the top left 500px by 500px of that image as a background. I could set the background image to be centered like so:
background:transparent url(image.png) no-repeat center;