CSS 显示调整大小和裁剪的图像
我想显示来自 URL 的具有特定宽度和高度的图像,即使它具有不同的尺寸比例。 所以我想调整大小(保持比例),然后将图像剪切到我想要的大小。
我可以使用 html img
属性调整大小,并且可以使用 background-image
进行剪切。
我怎样才能两者兼得?
示例:
此图像:
大小为 800x600
像素,我想显示为 200x100
像素的图像
使用 img
我可以调整图像大小 200x150px
:
<img
style="width: 200px; height: 150px;"
src="https://i.sstatic.net/wPh0S.jpg">
这给了我这个:
<img style="width: 200px; height: 150px;" src="https://i.sstatic.net/wPh0S.jpg">
并且使用background-image
我可以将图像剪切200x100
像素。
<div
style="background-image:
url('https://i.sstatic.net/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
给我:
<div style="background-image:url('https://i.sstatic.net/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
我怎样才能两者兼得?
调整图像大小,然后将其剪切为我想要的大小?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(21)
您可以结合使用这两种方法,例如。
您可以使用负
边距
在内移动图像。
You could use a combination of both methods eg.
You can use negative
margin
to move the image around within the<div/>
.使用 CSS3 可以使用 background-image 的大小="noreferrer">
background-size
,同时实现这两个目标。大量示例位于 css3.info" rel="noreferrer">css3.info。
根据您的示例实现,使用 donald_duck_4.jpg。 在这种情况下,
background-size: cover;
正是您想要的 - 它适合background-image
以覆盖包含的整个区域;
并剪掉多余的部分(取决于比例)。css3 背景图像 background-size
With CSS3 it's possible to change the size of a
background-image
withbackground-size
, fulfilling both goals at once.There are a bunch of examples on css3.info.
Implemented based on your example, using donald_duck_4.jpg. In this case,
background-size: cover;
is just what you want - it fits thebackground-image
to cover the entire area of the containing<div>
and clips the excess (depending on the ratio).css3 background-image background-size
你尝试过使用这个吗?
我需要调整图像大小、居中(垂直和水平)然后裁剪它。
我很高兴地发现,它可以在单个 css 行中完成。
检查此处的示例: http://codepen.io/chrisnager/pen/azWWgr/? editors=110
以下是该示例中的
CSS
和HTML
代码:Did you try to use this?
I needed to resize image, center (both vertically and horizontally) and than crop it.
I was happy to find, that it could be done in a single css-line.
Check the example here: http://codepen.io/chrisnager/pen/azWWgr/?editors=110
Here is the
CSS
andHTML
code from that example:包含的 div 本质上是通过隐藏溢出来裁剪图像。
The containing div with essentially crop the image by hiding the overflow.
对之前答案的一个小补充,包括
object-fit: cover
:对象位置
A small addition to the previous answers that includes
object-fit: cover
:object-position
谢谢桑乔法特。
我对你的答案有一个改进。 由于裁剪是针对每个图像量身定制的,因此该定义应该位于 HTML 而不是 CSS 中。
Thanks sanchothefat.
I have an improvement to your answer. As crop is very tailored for every image, this definitions should be at the HTML instead of CSS.
下面的代码将为您裁剪图像。 您可以使用 object-fit
The below code will crop your image for you. You can play around with object-fit
尝试使用
clip-path
属性:更多示例此处。
Try using the
clip-path
property:More examples here.
实例:
https://jsfiddle.net/de4Lt57z/
HTML:
CSS:
说明:
这里图像的大小是根据图像的宽度和高度值调整的。 裁剪是通过clip属性完成的。
有关剪辑属性的详细信息,请参见:
http://tympanus.net/codrops/2013/ 01/16/理解-css-clip-property/
Live Example:
https://jsfiddle.net/de4Lt57z/
HTML:
CSS:
Explanation:
Here image is resized by width and height value of the image. And crop is done by clip property.
For details about clip property follow:
http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
在裁剪类中,放置您想要显示的图像尺寸:
html 将如下所示:
In the crop class, place the image size that you want to appear:
The html will look like:
有 服务(例如 Filestack)可以为您完成此操作。
它们获取您的图像网址并允许您使用网址参数调整其大小。 这很容易。
调整大小到 200x100 但保持宽高比后,您的图像将如下所示
整个网址看起来像这样
,但重要的部分只是
There are services like Filestack that will do this for you.
They take your image url and allow you to resize it using url parameters. It is pretty easy.
Your image would look like this after resizing to 200x100 but keeping the aspect ratio
The whole url looks like this
but the important part is just
您可以将 img 标签放在 div 标签中并同时执行这两项操作,但我建议不要在浏览器中缩放图像。 大多数时候它的表现很糟糕,因为浏览器的缩放算法非常简单。 最好先在 Photoshop 或 ImageMagick 中进行缩放,然后将其漂亮漂亮地提供给客户。
You can put the img tag in a div tag and do both, but I would recommend against scaling images in the browser. It does a lousy job most of the time because browsers have very simplistic scaling algorithms. Better to do your scaling in Photoshop or ImageMagick first, then serve it up to the client nice and pretty.
我所做的是创建一个服务器端脚本,该脚本将在服务器端调整图片大小并裁剪图片,以便通过互联网发送更少的数据。
这是相当微不足道的,但如果有人感兴趣,我可以挖掘并发布代码(asp.net)
What I've done is to create a server side script that will resize and crop a picture on the server end so it'll send less data across the interweb.
It's fairly trivial, but if anyone is interested, I can dig up and post the code (asp.net)
如果您使用 Bootstrap,请尝试使用
{ background-size: cover;
对于}
可以给 div 一个类,比如
所以就变成了
div.示例{
背景大小:封面}
If you are using Bootstrap, try using
{ background-size: cover;
for the}
<div>
maybe give the div a class say<div class="example" style=url('../your_image.jpeg');>
so it becomesdiv.example{
background-size: cover}
我最近需要这样做。 我想制作一个 NOAA 图表的缩略图链接。 由于他们的图表可能随时更改,因此我希望我的缩略图也随之更改。 但他们的图表存在一个问题:它的顶部有一个巨大的白色边框,因此如果您只是缩放它以制作缩略图,最终会在文档中出现无关的空白。
这是我解决问题的方法:
http://sealevel.info/example_css_scale_and_crop.html
首先我需要做一点算术。 NOAA 的原始图像为 960 × 720 像素,但顶部 70 个像素是多余的白色边框区域。 我需要一个 348 × 172 的缩略图,顶部没有多余的边框区域。 这意味着原始图像的所需部分高为 720 - 70 = 650 像素。 我需要将其缩小到 172 像素,即 172 / 650 = 26.5%。 这意味着需要从缩放图像的顶部删除 70 = 19 行像素中的 26.5%。
所以...
设置高度 = 172 + 19 = 191 像素:
height=191
将下边距设置为 -19 像素(将图像缩短至 172 像素高):
margin-bottom:-19px
将顶部位置设置为 -19 像素(将图像向上移动,以便顶部 19 像素行溢出并隐藏,而不是底部的行):
top:-19px
生成的 HTML 如下所示:
如您所见,我选择对包含 的样式进行样式设置。 标签,但您可以设置
这种方法的一个缺陷是,如果显示边框,则顶部边框将会丢失。 因为无论如何我都使用 border=0,所以这对我来说不是问题。
I needed to do this recently. I wanted to make a thumbnail-link to a NOAA graph. Since their graph could change at any time, I wanted my thumbnail to change with it. But there's a problem with their graph: it has a huge white border at the top, so if you just scale it to make the thumbnail you end up with extraneous whitespace in the document.
Here's how I solved it:
http://sealevel.info/example_css_scale_and_crop.html
First I needed to do a little bit of arithmetic. The original image from NOAA is 960 × 720 pixels, but the top seventy pixels are a superfluous white border area. I needed a 348 × 172 thumbnail, without the extra border area at the top. That means the desired part of the original image is 720 - 70 = 650 pixels high. I needed to scale that down to 172 pixels, i.e., 172 / 650 = 26.5%. That meant 26.5% of 70 = 19 rows of pixels needed to be deleted from the top of the scaled image.
So…
Set the height = 172 + 19 = 191 pixels:
height=191
Set the bottom margin to -19 pixels (shortening the image to 172 pixels high):
margin-bottom:-19px
Set the top position to -19 pixels (shifting the image up, so that the top 19 pixel rows overflow & are hidden instead of the bottom ones):
top:-19px
The resulting HTML looks like this:
As you can see, I chose to style the containing <a> tag, but you could style a <div>, instead.
One artifact of this approach is that if you show the borders, the top border will be missing. Since I use border=0 anyhow, that wasn't an issue for me.
您可以使用 Kodem 的图像调整大小服务。 您只需调用 http 即可调整任何图像的大小。 可以在浏览器中随意使用,也可以在您的生产应用程序中使用。
You can use Kodem's Image Resize Service. You can resize any image with just a http call. Can be used casually in the browser or used in your production app.
您还可以使用名为 Croppie 的工具来裁剪图像......
You can also use a tool called Croppie that can crop images...