问题
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.
回答1:
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.
回答2:
You may find this article useful. It explains about optimizing images for responsive display and avoiding multiple image downloads
回答3:
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.
来源：https://stackoverflow.com/questions/17579573/bootstrap-responsive-images-scaling