使用Twitter Bootstrap我意识到,默认情况下,它可以响应地缩放图像.这是伟大的,但并不总是完美的.
例如说,我在桌面上有一个500×300的图像,然后调整移动的大小,这个图像将会变得非常小而且不太高,丢失了图像的大部分细节.
我已经看到其他网站实际上没有多少缩放图像,而是使用父div来对掩码进行排序. (http://www.fitnessfireworks.com是一个很好的例子,不再可用.)
什么是最好的方法来完成这个？ CSS背景图像和背景图像缩放的组合？只是寻找最佳做法.
解决方法
I have seen how other sites actually don’t scale the image much,but rather use the parent div to sort of mask the image
如果您检查您提到的页面上的CSS,您将看到,而不是使用imline图像,它们通常定义具有背景图像的div,并使用CSS
#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}
以下是一个示例,您可以如何通过缩放内嵌图像与背景图像获得完全不同的结果.
第二种方法的关键是使用background-size：cover和整理div的大小(因此背景图像的大小).
http://css-tricks.com/perfect-full-page-background-image/有关背景封面的变化和选项的良好信息.
