Bootstrap响应式图像缩放

Question

使用Twitter Bootstrap我意识到默认情况下它会响应地缩放图像.这很棒,但并不总是完美的.

比方说,我500x300在桌面上有一个图像,然后它调整移动大小,图像将非常小而不是很高,丢失图像的大部分细节部分.

我已经看到其他网站实际上没有多大的缩放图像,而是使用父div来排序mask图像.(http://www.fitnessfireworks.com就是一个很好的例子,不再可用.)

完成此任务的最佳方法是什么？的组合CSS背景图像和背景图像缩放？只是寻找最佳实践.

Answer 1

我已经看到其他网站实际上不是很多地缩放图像,而是使用父div来对图像进行排序

如果你检查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-image.

http://www.bootply.com/67094

第二种方法的关键是使用background-size:cover并操纵div的大小(因此也就是背景图像的大小).

http://css-tricks.com/perfect-full-page-background-image/有关于变体和选项的良好信息background-cover.

Answer 2

如果图像质量很重要，我会使用两个使用不同类声明的图像。外部工具在缩放图像方面总是比浏览器即时缩放图像效果更好。