更多免费资源解压密码

Getty Images – one of the world’s largest photographic rights holders has made most of its 35 million images available free of charge for non-commercial, editorial use, allowing customers to embed them via <iframe> elements, as YouTube does with its videos. Unfortunately <iframe> elements are not responsive by default, making Getty’s standard fare of limited use in modern websites. In this article I’ll show you how to change that, together with even more resources for free images.

盖蒂图片社 ( Getty Images) –世界上最大的照片版权持有者之一，已将其3500万张图片中的大部分免费提供给非商业，社论用途，使客户可以通过<iframe>元素将其嵌入，就像YouTube对其视频一样 。 不幸的是，默认情况下<iframe>元素没有响应 ，这使得Getty的标准票价在现代网站中受到了限制。 在本文中，我将向您展示如何进行更改，以及更多免费图片资源。

盖蒂图片社 (Getty Images)

Not every image is available for embedding from Getty: those that are feature an embed icon in their detailed thumbnail view. Clicking on the icon will produce embed code that looks something like this:

并非每张图像都可以从Getty中嵌入：那些在其详细缩略图视图中带有嵌入图标的图像。 单击该图标将产生嵌入代码，如下所示：

<iframe src="//embed.gettyimages.com/embed/..." width="413" height="483" frameborder="0" scrolling="no"></iframe>

As you can see, the images provided are not yet high resolution, averaging around 420 pixels wide: good for illustration in body text, but not banner images. As it stands, the <iframe> will render the image at a fixed width. We’re about to change that in four steps, borrowing a technique used to make YouTube videos fluid:

如您所见，所提供的图像还不是高分辨率的，平均宽度约为420像素：适合于在正文中显示插图，但不适用于横幅图像。 就目前而言， <iframe>将以固定宽度渲染图像。 我们将通过四个步骤来改变它，借用一种使YouTube视频流畅的技术 ：

步骤1 (Step One)

Remove the width and height attributes from the <iframe>. Add http before the URL for the image, which will allow it to appear when you test the page locally. Then, add a <div> around the outside:

从<iframe>删除width和height属性。 在图像的URL之前添加http ，这将允许它在本地测试页面时显示。 然后，在外部添加<div> ：

<div class="getty-container"><iframe src="http://embed.gettyimages.com/ embed/468887443..." frameborder="0" scrolling="no"></iframe>
</div>

Note the class that is added to the wrapping <div>.

注意添加到包装<div> 。

第二步 (Step Two)

Determine the image’s aspect ratio: the division of the image’s height by its width. A square image will have a ratio of 1:1; an image that is twice is wide as it is tall will have a ratio of 1:2. Keep this ratio in mind: we’ll use it in the next step.

确定图像的宽高比：图像的高度除以其宽度。 正方形图像的比例为1：1； 高一倍的图像的宽高比为1：2。 请记住这个比例：我们将在下一步中使用它。

第三步 (Step Three)

Determine how wide you want the image to appear: I would suggest no more than half the width of your main content, to preserve image quality. Add the following styles to the page, adjusting the width as necessary:

确定您希望图像显示的宽度：为了保持图像质量，建议不要超过主要内容的宽度的一半。 在页面上添加以下样式，并根据需要调整width ：

.getty-container {position: relative;width: 50%;height: 0;overflow: hidden;
}
.getty-container iframe {position: absolute;top: 0; left: 0;width: 100%;height: 100%;
}

The image will be cut off. To compensate, add a padding-bottom amount using the ratio you determined in Step Two. For example, my image is slightly taller than it is wide:

图像将被切断。 为了进行补偿，请使用您在第二步中确定的比率来添加padding-bottom量。 例如，我的图像比宽度稍高：

.getty-container {position: relative;width: 50%;padding-bottom: 55%;height: 0;overflow: hidden;
}

第四步 (Step Four)

The image will now appear correct, but it’s not sitting quite right in its container. (Add a border to the <div> to see that for yourself). To compensate, we need to add 55 pixels in padding-top to make space for the caption at the bottom:

图像现在看起来正确，但是它在容器中的位置不太正确。 (在<div>上添加边框以自己查看)。 为了补偿，我们需要在padding-top中添加55像素，以在底部的标题留出空间：

.responsive-container {position: relative;width: 50%;padding-bottom: 55%;padding-top: 55px;height: 0;overflow: hidden;
}

That’s it: you now have millions of responsive images at your fingers, provided you use them in a way that does not break Getty’s embedded image license.

就是这样：只要您以不破坏Getty的嵌入式图像许可证的方式使用它们，现在您的手指上就有数百万个响应图像。

The fact that Getty provides images via an <iframe> makes it important that you check that the images continue to work: technically, Getty could push anything they wanted through that iframe window, including ads, or choose to break the image entirely.

盖蒂通过<iframe>提供图像的事实使您务必检查图像是否继续起作用：从技术上讲，盖蒂可以通过该iframe窗口推送他们想要的任何内容，包括广告，或选择完全破坏图像。

Zoommy (Zoommy)

is a new cheap (US$3.99) Mac OS X-only application that scrapes and searches many of the free stock photo sites mentioned here and in the previous article; 20 sites are currently covered, with searches available for both keyword and color.

Zoommy是一款新的廉价(3.99美元)仅Mac OS X的应用程序，可刮擦并搜索此处和上一篇文章中提到的许多免费图片网站。 当前涵盖20个站点，可同时搜索关键字和颜色。

其他图片来源 (Other image sources)

A few alternative, free sources for photographs. The selection here is not as diverse as Getty, but offer higher resolution images, usually licensed under Creative Commons:

一些可供选择的免费照片来源。 这里的选择不像Getty那样多样化，而是提供了更高分辨率的图像，通常在“知识共享”下获得许可：

• Jay Mantri offers seven new professional, free-for-use photographs every Thursday.

  杰伊·曼特里(Jay Mantri)每周四提供七张免费的专业照片。

• Startup Stock Photos provides business and technology images.

  起始的库存照片提供商业和技术图象。

• It’s not generally appreciated that most government agencies are required to offer their creative output for free: NASA, for example, has an extensive multimedia collection available for use. Some of this collection is highlighted in Peek.space

  人们通常不理解大多数政府机构需要免费提供其创意输出：例如，NASA拥有大量可供使用的多媒体收藏 。 该集合中的一些在Peek.space中突出显示

• Foodies Feed has a growing, epicurean collection of high-quality food photographs.

  Foodies Feed收集了越来越多的，高质量的食物照片。

• IMCreator offers free images for commercial or personal use.

  IMCreator提供用于商业或个人用途的免费图像。

• I really like the model used by imgembed: 10,000 free impressions of an image if it is attributed to the photographer, with a fee paid for every 10,000 views after that point.

  我真的很喜欢imgembed所使用的模型：如果将图像归因于摄影师， 则可为该图像提供10,000次免费印象，此后每10,000次观看需要付费。

• LibreStock searches some of the image collections here, plus many more.

  LibreStock在这里搜索一些图像集合，以及更多其他图像集合。

offers images at set prices of $10 and $25 for medium-sized professional images; the company is also notable for splitting income with contributing photographers at much fairer rates than other services, prompting photographers such as Thomas Hawk and Tyler Stalman to shift their images exclusively to the stock photography provider.

Stocksy.com提供的图像价格分别为10美元和25美元，适用于中型专业图像； 该公司还以与其他服务相比要公平得多的费率与摄影师分享收入，这也引人注目，这促使诸如Thomas Hawk和Tyler Stalman之类的摄影师将其图像完全转移给了股票摄影提供者。

If you have other free (or nearly free) legal image sources you like to use, feel free to share them in the comments below! Before you do so, check out the previous article on gratis image resources.

如果您想使用其他免费(或几乎免费)的合法图像资源，请随时在下面的评论中分享它们！ 在执行此操作之前，请先阅读有关免费图像资源的上一篇文章 。

翻译自: https://thenewcode.com/839/More-Resources-For-Free-And-Nearly-Free-Legal-Images

更多免费资源解压密码