背景图片根据宽度自适应高度的方案

移动前端自适应开发过程中，使用背景图片替换img标签时，img标签可以根据屏幕宽度自适应高度，而背景图片却无法适应高度，使用css的内边距（padding）可以解决高度问题，因为垂直方向的padding值，根据宽度的大小来计算的，办法如下；

<style>.wrap{width: 100%;}.banner{width: 100%;max-width: 490px;  /**图片的宽度不大于图片实际像素**/height: 0;max-height: 329px;padding-bottom: 67.14%; /**根据图片高宽比计算*/margin: 0 auto;background: url("images/test.jpg") no-repeat center;background-size: cover;}@media only screen and (min-width: 490px) {/**屏幕大于490时，将背景框高度设置为图片高度的实际像素**/.banner{height: 329px;padding-bottom: 0;}}
</style>
<div class="wrap"><!--role属性  aria-label属性增强html的可读性，更语义化--><div role="img" aria-label="banner img"  class="banner"></div>
</div>

背景图片根据宽度自适应高度的方案相关推荐

前端背景图放置_前端开发关于网页背景图片的缩放自适应及组合形成背景图的问题...
前端游戏开发贴吧游戏前端开发游戏开发流程策划美术前端后端昨天在切图时遇到如下两个问题: 1.需要背景图片无论浏览器大小如何缩放,背景图片始终宽度百分百显示. 2.需要将给出的一张背景图片和一张 ...
vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕
在做项目的时候,想要实现背景图片将整个页面铺满,等内容变多,高度超过屏幕高度的时候,背景图片仍然能够完全铺满. 第一种方式:(不是想要的) 第一种情况就是最外层设置一个div盒子,宽度100%,高度1 ...
java读取服务器图片大小,SpringMVC中MultipartFile上传获取图片的宽度和高度详解
SpringMVC一般使用MultipartFile来做文件的上传,通过MultipartFile的getContentType()方法判定文件的类型(MIME) ".doc":& ...
私人笔记 -- 将图片插入到指定的单元格位置，并设置图片的宽度和高度
/// <summary> /// 将图片插入到指定的单元格位置,并设置图片的宽度和高度. /// 注意:图片必须是绝对物理路径 /// </summary> /// < ...
html自动图片尺寸,关于html：CSS背景图像适合宽度，高度应按比例自动缩放
我有 body { background: url(images/background.svg); } 期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例. 例如如果原始图像恰好是100 ...
Android WebView 图片超出宽度自适应，点击查看大图
webView 配置 WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptCanOpenWindowsA ...
html图片的宽度和高度设置,CSS设置img图片的宽度和高度
如何使用CSS控制HTML中图片高度宽度,统一对象内图片高度宽度等样式属性? 我们在布局图片列表时,通常我们要控制img图片的高度和宽度这样来达到图片统一. 如以下这个的图片列表布局示图图片img高 ...
flutter 确定图片的宽度和高度，用的是completer回调
参考不能用Future,用的是completer回调,一般如果你的异步操作是带回调的不能即时返回结果的类型,你需要用到 Completer image.image.resolve(ImageConf ...
VUECSS——最简单的为元素添加背景图片，并自适应div的大小
为一个高宽固定的块元素添加背景图片在样式表中添加背景图片的src, background-image: url('../../assets/images/top_bg1.png') ; 通常还需要 ...

背景图片根据宽度自适应高度的方案

背景图片根据宽度自适应高度的方案相关推荐

最新文章

热门文章