[英]Resize and center image in html/css?
Is there a way I can resize, crop, and center an image using html/css only? 有没有办法只使用html / css调整图像大小,裁剪和居中图像? (img tag or css sprite)
(img标签或css精灵)
For example if I have a 500x500 pixel image, 例如,如果我有一个500x500像素的图像,
I want to resize that to a 250x250 pixel image 我想将其调整为250x250像素的图像
I want to make the actual visible image to be 100x100, but still have the scale of a 250x250 sized image. 我想将实际可见图像设置为100x100,但仍然具有250x250大小的图像的比例。
I want the center of the image to be at a location x,y. 我希望图像的中心位于x,y位置。
Is that possible with only html/css, if not, how do you propose I go about it with javascript? 只有html / css才有可能,如果没有,你怎么建议我用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; 对于(2),说我的缩放图像现在是200x200,我希望我的可见图像是100x100:所以我猜我的意思是我希望图像的比例和分辨率为200x200但我希望可见图像是100x100或换句话说,可见图像将位于坐标x,y:0,0; 0,100;
0,100; 100,0;
100,0; 100,100;
100,100; of the 200x200 image.
200x200图像。 Sorry, but I'm not good at explaining this.
对不起,但我不擅长解释这个。
Update: an example at http://jsfiddle.net/LTrqq/5/ 更新: http : //jsfiddle.net/LTrqq/5/上 的示例
For 对于
width
and height
for the <img>
element width
和height
来表示<img>
元素 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
position: absolute
,使用所需的top
和left
,并将其放置在另一个div中, position: relative
,此外部div可以具有width: 100px
, height: 100px
, overflow: hidden
top
and left
value. top
和left
值。 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. 我们需要
position: relative
对于(2)中的外部div,因为我们希望内部div相对于这个外部div而不是相对于整个文档的位置。
For the top
and left
, it is like top: -50px; left: -50px
对于
top
和left
,它就像top: -50px; left: -50px
top: -50px; left: -50px
as an example. top: -50px; left: -50px
为例。
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.
-X和-Y坐标可以使您获得裁剪偏移。 So for example if you want to crop from 20x30 you'd make them -20px and -30px.
因此,例如,如果你想从20x30进行裁剪,你可以使它们成为-20px和-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: 如果你想要居中它并且你知道裁剪容器中图像的大小,你可以使用以下CSS:
#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }
125px is half of 250 so it should make it central. 125px是250的一半所以它应该使它成为核心。
You can definatley size the image to any dimenson then place it in a div and hide the overflow to acheive a crop look. 您可以将图像定义为任何尺寸,然后将其放置在div中并隐藏溢出以实现裁剪效果。 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
但是,如果您真的想裁剪图像,以便说有人想要下载它的副本并进行缩放检查: 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. 但是如果你可以尝试PHP,那么http://www.binarymoon.co.uk/projects/timthumb/非常容易使用,只需将它放在你的服务器上并将你的img标签src指向它。 example: < img src="/timthumb.php?mycat.jpg&h=250&w=250" />
例如:<img src =“/ timthumb.php?mycat.jpg&h = 250&w = 250”/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.