我想实现一个内容列表页面,在不同分辨率下所有的图片高度和宽度都保持统一。
我一开始想法是,固定一个尺寸,如果图片宽度过宽,就根据高度等比拉伸自动裁剪填充。如果图片高度过高,就根据宽度等比拉伸裁剪填充。
当在不同分辨率手机,和PC上浏览时候,图片还能根据大小做自动缩放。
不知道这个效果是用CSS或者HTML如何实现。
如果不用JS来操作的话,那么你可以使用CSS中的背景图片方式。
1、把图片放到一个标签的background中;
2、这个标签的宽度和高度按照你的需求设置百分比(为了满足不同分辨率的自适应);或者可以使用media来判断,然后给不同的宽度值;
3、给background-size设置一个属性值,这里应该来说是使用container(希望单词没写错)
基本上来说这样就差不多了,如果你还要满足一个等比要求的话,那么这里有一个URL,你可以参考一下:http://ons.me/493.html
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。