自举响应图像缩放 [英] Bootstrap Responsive Images Scaling

问题描述

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

例如，我在台式机上有一个500x300图像，然后它调整了移动尺寸，该图像将非常小而不是很高，从而丢失了图像的许多细节部分.

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

完成此操作的最佳方法是什么? CSS背景图像和背景图像缩放的组合?只是在寻找最佳实践.

解决方案

我已经看到其他网站实际上并未如何缩放图像，而是使用父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:覆盖并操纵div的大小(以及背景图像的大小).

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

Using Twitter Bootstrap I realize that by default it scales images responsively. This is great, but isn't always perfect.

Say for example I have a 500x300 image on desktop, then it resizes for mobile that image is going to be really small and not very tall, losing much of the detailed parts of the image.

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. (http://www.fitnessfireworks.com was a great example of this, no longer available.)

What is the best method to accomplish this? A combination of CSS background-image and background image scaling? Just looking for best practices.

解决方案

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

If you examine the CSS on the page you mention, you will see that rather than using imline images, they are typically defining divs with background images, and using CSS like

#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}  

Here's an example of how you can get completely different results with scaling of inline image vs background-image.

http://www.bootply.com/67094

The key to the second method is to use background-size:cover and manipulate the size of the div (and hence the size of the background-image).

http://css-tricks.com/perfect-full-page-background-image/ has good info about variations and options with background-cover.

这篇关于自举响应图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！