Hero images 给响应式设计提出了独特的挑战。在最近的响应式图片核查期间,我们发现了一个独特的解决方法,一个我想要分享的方法。什么是Hero images?直到几年前,我都不熟悉Hero image这个术语。一个就职于大公司的朋友用这个术语,我不得不问这个是什么意思。我不知道这是不是一个常见的描述因为我与世隔绝了。或者这可能是大公司的术语。但为了以防万一我不是唯一一个不知道Hreo image是什么的人,Hero image是一个大的促销的图片就像下面这个一样:响应式Hero images?Hero images 经常给响应式设计呈现出独特的问题。很多Hero images在图像本身上有文本。当文本在一个图像中时,经常意味着响应式图像将落入艺术指导用例而不是更容易解决的分辨率切换用例。通过查看CB2网站和他的一个Hero images,我们可以看到一个例子关于为什么艺术指导是很重要的。这个图像包含了三个照片,两个带有文字的logo,一个邮票和都是用细的笔触的文本。如果我们只是把这个图像调整到320px宽,文本将会变得太小而无法辨认。CB2目前没有一个响应式的网站,但是他有一个移动网站,我们可以看到他们如何在小屏幕上处理这个图像。为了使图像在小屏幕上起作用,CB2做了如下操作:从三个图片变为两个去除文本改变长宽比使图片更高重新设计图像的布局如你所见,为了使Hero image
...
继续阅读
(15)