自举响应图像缩放

完成此操作的最佳方法是什么? 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 imageIf 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/67094The 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. 这篇关于自举响应图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！