开发者社区> 问答> 正文

固定图片高度和宽度,并且根据浏览器自适应 如何实现?

我想实现一个内容列表页面,在不同分辨率下所有的图片高度和宽度都保持统一。

我一开始想法是,固定一个尺寸,如果图片宽度过宽,就根据高度等比拉伸自动裁剪填充。如果图片高度过高,就根据宽度等比拉伸裁剪填充。

当在不同分辨率手机,和PC上浏览时候,图片还能根据大小做自动缩放。

不知道这个效果是用CSS或者HTML如何实现。

展开
收起
杨冬芳 2016-06-07 14:30:11 2815 0
1 条回答
写回答
取消 提交回答
  • IT从业

    如果不用JS来操作的话,那么你可以使用CSS中的背景图片方式。

    1、把图片放到一个标签的background中;
    2、这个标签的宽度和高度按照你的需求设置百分比(为了满足不同分辨率的自适应);或者可以使用media来判断,然后给不同的宽度值;
    3、给background-size设置一个属性值,这里应该来说是使用container(希望单词没写错)

    基本上来说这样就差不多了,如果你还要满足一个等比要求的话,那么这里有一个URL,你可以参考一下:http://ons.me/493.html

    2019-07-17 19:30:04
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
基于浏览器的实时构建探索之路 立即下载
基于浏览器的实时构建探索之路--玄寂 立即下载