css背景图宽度只适应，高度不变

保证1920px的图片，在低分率率的电脑上也能正常显示，两边裁剪，中间居中，高度不变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div class="test"><div style="width: 100%;height: 390px; background: url(http://imagecdn0.17huo.com/o_1bvue57hgbp8ms1diu18ctjnrh.jpg) no-repeat center;background-size: 1920px 390px;"></div>
</div>
</body>
</html>

css背景图宽度只适应，高度不变相关推荐

html设置背景图片高度自适应屏幕,CSS设置背景图宽度100%，高度自适应
div的高度随背景图片的高度变化: 原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比.高度设置为0..newcenter{ width: 100 ...
css 背景图旋转只让背景图片旋转180度的实现示例
最近进行二次开发的时候有个图片用背景图要旋转一定角度. 下图中如果只给.question添加背景通过CSS3的transfrom rotate肯定是会影响文字的展示. 所以把背景图放到伪类中进行旋转就 ...
CSS设置背景图宽度100%，高度自适应
.newcenter{width: 100%;background: url('../../assets/img/newcenter.png') no-repeat;background-size: ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...
HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...

css背景图宽度只适应，高度不变

css背景图宽度只适应，高度不变相关推荐

最新文章

热门文章