CSS Bootstrap 响应式图像缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17579573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Responsive Images Scaling
提问by Nic Hubbard
Using Twitter BootstrapI realize that by default it scales images responsively. This is great, but isn't always perfect.
使用Twitter Bootstrap我意识到默认情况下它会响应式缩放图像。这很棒，但并不总是完美的。
Say for example I have a 500x300image 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.
例如，我500x300在桌面上有一个图像，然后它为移动设备调整大小，该图像将非常小而且不是很高，丢失了图像的大部分细节部分。
I have seen how other sites actually don't scale the image much, but rather use the parent div to sort of maskthe image. (http://www.fitnessfireworks.comwas a great example of this, no longer available.)
我已经看到其他网站实际上并没有过多地缩放图像，而是使用父 div 对mask图像进行排序。（http://www.fitnessfireworks.com就是一个很好的例子，不再可用。）
What is the best method to accomplish this? A combination of CSSbackground-image and background image scaling? Just looking for best practices.
实现这一目标的最佳方法是什么？的组合CSS背景图像和背景图像缩放？只是在寻找最佳实践。
回答by David Taiaroa
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
我已经看到其他网站实际上并没有过多地缩放图像，而是使用父 div 来对图像进行排序
If you examine the CSSon the page you mention, you will see that rather than using imline images, they are typically defining divs with background images, and using CSSlike
如果您检查CSS您提到的页面上的 ，您会看到它们通常使用背景图像定义 div，而不是使用 imline 图像，并使用CSS类似
#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.
这是一个示例，说明如何通过缩放内联图像与background-image.
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).
第二种方法的关键是使用 background-size:cover 并操纵 div 的大小（以及背景图像的大小）。
http://css-tricks.com/perfect-full-page-background-image/has good info about variations and options with background-cover.
http://css-tricks.com/perfect-full-page-background-image/有关于background-cover.
回答by Zim
回答by Diodeus - James MacFarlane
If image quality is important I'd use two images using different class declaration. External tools will always be better at scaling images than the browser doing it on-the-fly.
如果图像质量很重要，我会使用两个使用不同类声明的图像。外部工具在缩放图像方面总是比浏览器即时执行更好。
