css响应式设计_用于响应站点设计CSS流体图像技术

最新推荐文章于 2024-08-17 19:29:49 发布

cungui5726

最新推荐文章于 2024-08-17 19:29:49 发布

阅读量157

点赞数

文章标签： css html java python js ViewUI

原文链接：https://thenewcode.com/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

版权

css响应式设计

“Responsive design” is not a single technology but a set of techniques* that allow web pages to serve the needs of both mobile and desktop users. The core components are:

“响应式设计”不是一项单一的技术，而是允许网页满足移动和桌面用户需求的一系列技术*。核心组件是：

CSS @media queries
CSS @media查询
Fluid images and video
流畅的图像和视频
Fluid layout techniques, including flexbox, percentage units, and (in the near future) CSS Grids.
流体布局技术，包括flexbox ，百分比单位和(不久的将来)CSS网格。
JavaScript, often triggered by window.matchMedia
JavaScript ，通常由window.matchMedia触发
Server-side solutions
服务器端解决方案
SVG to create resolution-free images
SVG创建无分辨率图像

A responsive site may utilize one, some, or all of these technologies, depending on the intentions of its designers. I’ve covered the basics of media queries in past articles; now it’s time to look at fluid images, a technique first suggested by Ethan Marcotte.

响应站点可以根据其设计者的意图来利用其中的一种，部分或全部技术。在过去的文章中，我已经介绍了媒体查询的基础。现在是时候看看流体图像了，这是Ethan Marcotte首次提出的技术。

Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

网页文本默认情况下是流畅的：随着浏览器窗口的缩小，文本重排以占据剩余空间。 图像不是自然流动的 ：它们在视口的所有配置下都保持相同的大小和方向，如果对于容器而言太大，则会被裁剪。在移动浏览器中显示图像时，这会产生一个难题：由于图像保持其原始大小，因此与周围文本内容相比，随着浏览器缩小，图像可能会被截断或以比例尺显示。

简单的流体图像 (Simple Fluid Images)

One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set the max-width of the image at 100%:

解决此问题的一种方法是按相对单位而不是绝对像素尺寸来调整图像大小。最常见的相对解决方案是将图片的max-width设置为100% ：

<img src="royal-enfield-motorcycle.jpg" style="max-width:100%;height:auto;" 
alt="Royal Enfield Motorcycle">

alt — `max-width` scaled image with narrowed browser window `max-width`缩放图像与缩小的浏览器窗口的比较

Images with this CSS will display at their native dimension so long as there is enough room in the HTML container to do so; as the browser window narrows, the images will scale to fit, as you can see in the illustration above.

只要HTML容器中有足够的空间，带有此CSS的图像就会以其原始尺寸显示 ；当浏览器窗口变窄时，图像将缩放以适合您的视图，如上图所示。

This works well, as with a few limitations:

这很好用，但有一些限制：

A large image (over ~ 420 pixels wide) will increasingly dominate the document as the viewport shrinks down, as its native size is greater than the width of most smartphones. Scaling means that the image won’t be cut off, but it may be large relative to text at small viewport sizes.
随着视口缩小，大图像 (宽约420像素)将逐渐成为文档的主导，因为其原始尺寸大于大多数智能手机的宽度。缩放意味着图像不会被剪切，但相对于小视口的文本而言，图像可能会很大。
The initial layout and setup of the document is affected: because you are not setting the image’s height and width explicitly in the CSS, the browser cannot reserve any space for the image in the page. This will often cause the layout to “pop” when the user visits the page for the first time, as fluid images are loaded and forced to fit into their newly determined size.
文档的初始布局和设置会受到影响：由于您没有在CSS中显式设置图像的高度和宽度，因此浏览器无法在页面中为图像保留任何空间。当用户第一次访问页面时，这通常会导致布局“弹出”，因为加载了流体图像并强制其适应其新确定的大小。
Unless the image is already the full width of its container, this approach does not work well for HiDPI/Retina images: the image’s “actual size” will be shown as twice the width that you want it to be.
除非图像已经是其容器的整个宽度，否则此方法不适用于HiDPI / Retina图像：图像的“实际大小”将显示为所需宽度的两倍。

The basic max-width fluid image approach is a very good approach for article header and “hero” images, but for illustrations in body text, a more subtle approach is often required.

对于文章标题和“英雄”图像，基本的max-width流体图像方法是一种很好的方法，但是对于正文中的插图，通常需要更细微的方法。

更好的流体图像解决方案 (A Better Fluid Image Solution)

A better, albeit more complex approach to fluid images is to measure the width of the image as a percentage of the overall width of the page.

更好，更复杂的流体图像处理方法是将图像的width测量为页面总宽度的百分比 。

For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy:

例如，假设您在一个1200px宽的文档中有一个自然尺寸为500px×300px的图像。低于1200像素，文档将保持流畅。图像占文档宽度的百分比很容易：

(500 / 1200 ) × 100 = 41.66%

(500/1200)×100 = 41.66％

We can plug this number in as the width for the image; often this would be done inline, as each image will often be a different dimension:

我们可以将此数字作为图片的width插入；通常，这是内联完成的，因为每个图像通常都是不同的维度：

<img src="mount-mayon.jpg" style="float: right; width: 41.66%;" 
alt="A photograph of Mount Mayon, Phillipines, with the ruins of Cagsawa 
belltower in the foreground">

With this approach, the image will always remain in scale with the rest of the text:

使用这种方法，图像将始终与其余文本保持比例：

alt — `width` scaled image with narrowed browser window `width`比例图像与缩小的浏览器窗口的比较

This accommodates Retina pixel-doubled images, but can run into issues at extremes of large or small viewport sizes, when the image might appear too big or small relative to the text. To get around this, we can place a max and/or min width on the image in pixels as upper and lower limits:

这可以容纳Retina像素加倍的图像，但是当图像相对于文本而言显得太大或太小时，可能会在视口大小过大的情况下出现问题。为了解决这个问题，我们可以在图像上放置最大和/或最小宽度(以像素为单位)作为上限和下限：

<img src="mount-mayon.jpg" style="width: 41.66%; max-width:500px;" 
alt="A photograph of Mount Mayon, Philippines, with the ruins of Cagsawa 
belltower in the foreground">

The type of approach you use will depend on both the kind of image and the overall design of the site; there is also the possibility of transitioning the flexible images between breakpoints with a hybrid technique that utilizes media queries: we’ll look at that in the next article.

您使用的方法类型将取决于图像的类型和站点的总体设计；还可以通过利用媒体查询的混合技术在断点之间转换灵活的图像：我们将在下一篇文章中介绍。

改善浏览器性能 (Improving Browser Performance)

Specifying only the width of images may cause a doubling or tripling of the cycles that many browsers must process to layout the new, resized page. While each of these cycles typically take less than a millisecond, they stack up, especially if there are multiple scalable elements on the page. Addressing height in the same declaration can reduce this issue:

仅指定图像的width可能会使许多浏览器为布置新的，调整大小的页面而必须处理的周期增加一倍或三倍。尽管这些周期中的每个周期通常不到一毫秒，但它们会叠加在一起，尤其是在页面上有多个可伸缩元素的情况下。在同一声明中处理height可以减少此问题：

<img src="royal-enfield-motorcycle.jpg" style="width: 100%; height: auto" 
alt="Royal Enfield Motorcycle">

Finally, browsers are not always well-optimized to resizing images at quality. Chrome and Safari in particular can suffer from a slight blurriness to bitmap images, especially as they are scaled down. A setting in CSS can help in this regard:

最后，浏览器并非总是经过最佳优化以调整图像的质量。 Chrome和Safari尤其会遭受位图图像的轻微模糊，尤其是在缩小比例时。 CSS中的设置可以在这方面有所帮助：

img { 
	image-rendering: -webkit-optimize-contrast;
}

It should be noted that the difference this makes can vary between screens and platforms, so it is advisable to test its benefits before pushing to production.

应该注意的是，屏幕和平台之间的差异可能会有所不同，因此建议在投入生产之前测试其优势。