html图片撑开盒子,css背景图撑开盒子高度

本文原地址

需求：

给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px

问题：

背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，撑开容器达到模拟背景的目的，当然这么做的话其他元素只能选择浮动或者定位来排版了。

解决：

图片容器宽度是100%(浏览器宽度)，高度是after用padding-bottom:100%撑开的，100%就是直接根据【上级宽度】的数值计算的，所以这样只能撑出个正方形，需要长方形改变padding-bottom：50%这样使用上一级50%的宽度作为高度就行了。在此需求中计算得：1080/1980=56%；但是，此时若要在该容器内放置内容需要绝对定位，否则会把图片高度撑开过多。

代码：

.main {

min-width: 1024px;

background-image: url(bg.jpg);

background-repeat: no-repeat;

background-size: 100% 100%;

margin: 0 auto;

}

.main::after {

content: "";

display: block;

/*这里的padding = height / width*/

padding-bottom: 56%;

}

参考资料：

css背景图撑开盒子高度

图片作为div的背景图片，div几乎没有内容，div如何被撑起来并自适应的？

在未设置height和width的DIV中插入背景图片，如何修改代码，使DIV大小适应背景图片？

设计网页，常见的宽度是多少像素？

html图片撑开盒子,css背景图撑开盒子高度相关推荐

html图片高度撑开,CSS背景图撑开盒子高度
需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*1080)=57 ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
盒子隐藏背景图盒子过渡 3d
盒子隐藏样式: display:none: 背景系列 background属性. background-color 设置元素的背景颜色. background-img 将图片设置为元素的背景. ba ...
css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
CSS背景图和渐变色共存
CSS背景图和渐变色共存需求场景是在一个DOM元素上需要背景图和渐变色共存实现 background: url(https://img.alicdn.com/imgextra/i4/1881744 ...

html图片撑开盒子,css背景图撑开盒子高度

html图片撑开盒子,css背景图撑开盒子高度相关推荐

最新文章

热门文章