前言

一张banner图，在不同的屏幕上铺满
宽度与屏幕宽度相同，高度根据宽度进行自适应，即图片的定比例缩放
图片的宽高可以撑起盒子的宽高

一、图片定比例缩放方案

1.padding（推荐）

我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把图片百分百填充到我们设置的区域里面。

<div class="img_wrap"><img src="" />
</div>

.img_wap {padding-bottom: 56%;width: 100%;position: relative;
}.img_wap img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}

参考博客：https://blog.csdn.net/m_review/article/details/103348758`

2.根据width设置height

width的值100%，height的值通过width的值进行计算
必须先算出width的高度，然后计算出height的绝对高度
不能直接通过width百分比按照得到height百分比（width和height的1%高度是不一样的）

注：会出现二次渲染？css中写入js代码会发生什么？

二、图片的路径

1、同一目录下路径，直接使用图片名称进行访问或使用./（代表同级目录）
2、不同目录下路径，通过 . . /（代表上一级目录）
3、/代表根目录
参考博客：https://blog.csdn.net/qq_34769573/article/details/80445681

设置height百分比无效

当用百分比作为宽高时因为百分比是相对于其最近的父元素的宽高
(【注意一点：宽度一般会继承，而高度不会继承】)
所以首先其父元素要有宽高，宽度一般不设置会有默认值
(比如整个屏幕的宽度,【其实就是一层层继承下来的】)，
但是高度不设置就没有默认值，
因此如果父元素没设高度值，而其内部元素用了百分比作为高度时，是没有效果的

参考博客：https://blog.csdn.net/weixin_33819479/article/details/86276606

CSS图片定比例缩放相关推荐

html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
CSS实战笔记(十二) 图片等比例缩放
1.背景在网页展示图片是一个很常见的需求,大多数情况下,展示区域的大小是固定的,原图片的大小也是固定的如果展示区域的宽高和原图片的宽高不等比例,那么在默认情况下很可能会压缩或拉伸图片以适应区域大小 ...
vue.js 获取当前屏幕的宽度_vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式...
vue 获取当前屏幕的宽度,图片等比例缩放这个是一个背景图,点击对应的圆圈就会出现一个蒙层上面显示详情,但是只要当前窗口大小变化了,因为我的蒙层大小是固定的px,所以不会变,就不在图片对应的位置了 ...
理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用ba ...
jquery实现图片等比例缩放，解决max-width在ie中不兼容问题
上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 <script typ ...
html img图片等比例缩放_我掏空了各大搜索引擎，整理了HTML图片标签笔记，满满干货...
img标签介绍介绍 img: 英文全称 image(图像),代表的是一张图片. 如果要想在网页中显示图像,就可以使用img 标签,它是一个单标签.语法如下: <img src="图片 ...
html5表格图片按比例缩放,JS图片等比例缩放方法完整示例
本文实例讲述了JS图片等比例缩放方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...
用JavaScript实现网页图片等比例缩放
如何让网页中的图片等比例缩放呢,我参考了一些代码并自己写了个图片缩放的脚本,可以点击放大,同时用鼠标滑轮自由缩放,希望提出不同意见. 首先看看resizeimg函数的源代码: function res ...

CSS图片定比例缩放

文章目录

前言