我在我的 Rails 应用程序中使用 twitter-bootstrap,因此我同时为桌面和移动设备设计。
在桌面上,我的网站使用了一系列非常适合的“横幅”样式图像。当在移动设备上查看时,这些图像会保持缩放比例,因此太小了。
我希望发生的事情与 facebook 应用程序中的用户个人资料发生的事情非常相似。当您在桌面上查看您的 Facebook 个人资料时,您的横幅图像是其原始大小,而当您在移动设备上查看您的个人资料时,左侧和右侧被裁剪掉了。
是否可以在不上传 2 组图像的情况下执行此操作?
是否有我在 bootstrap 中忽略的东西或我可以用来解决这个问题的 css 中的一些基本东西?
例如,我的横幅图片在桌面上看起来像这样
在手机上是这样的
我真的很想将这个功能应用到我自己的网站,因为它在移动和桌面之间切换,非常感谢任何帮助
编辑 1
这是我用来显示图像的 html 示例
<div class="container">
<div class="row">
<div class="span12">
<div class="home-about-us">
<%= image_tag("about_us.jpg")%>
</div>
</div>
</div>
</div>
这是我应用到我的应用程序的sass
.home-about-us{
img{
display: block;
margin-left: auto;
margin-right: auto;
}
}
最佳答案
您可以执行以下两项操作之一:
1) 对 img 设置最大宽度限制,使其只能与设备本身一样宽,或者,
2) 使用媒体查询将手机的最大宽度指定为 720,然后指定图像的宽度,然后创建另一个媒体查询,但这次对平板电脑和台式机使用最小宽度 720,为图像指定不同的宽度。
关于css - 从桌面更改为移动时如何调整(裁剪)图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21880649/