svg和文字一起自适应_具有SVG和JavaScript的艺术指导自适应图像

svg和文字一起自适应

Since it was written several years ago the technique shown in this article has been largely supplanted by the <picture> element, although it does retain some advantages and may still be useful as a fallback.

由于它是几年前写的，因此本文中显示的技术已被<picture>元素大大取代，尽管它确实保留了一些优点，并且可能仍然可以用作回退。

There is a design truism that has been largely avoided in the web development industry to this point: not every image responds well to scaling. I’m not referring here to image quality – a relevant issue, but one that should eventually be addressed by advances such as the srcset attribute – but to aesthetics, particularly the visual relationship of pictures with other elements on the page.

到目前为止，在Web开发行业中已经避免了一种设计偏见：并非每个图像都能很好地响应缩放。 在这里，我并不是在指图像质量(一个相关的问题)，而是最终应通过诸如srcset属性之类的改进来解决的问题，而是指美学 ，尤其是图片与页面上其他元素的视觉关系。

As an example, take a fairly wide-aspect image used as a banner image, particularly one with a strong focal point. The image will work well on a desktop monitor with the browser maximized, but narrowing the window causes the responsive image to look increasingly out-of-balance with page content at smaller sizes:

例如，以宽幅图像用作横幅图像，尤其是具有强焦点的图像。 该图像将在桌面浏览器最大化的情况下在桌面显示器上很好地工作，但是缩小窗口会导致响应图像在页面尺寸较小的情况下看起来越来越不平衡：

Typical scaling for a responsive header image

响应标头图像的典型缩放

Ideally, we would prefer the image to be dynamically cropped as it scaled down, narrowing to the picture’s central point of interest:

理想情况下，我们希望图像在缩小时可以动态裁剪，缩小到图片的中心兴趣点：

Art-direct