2021-02-26

最新推荐文章于 2024-07-15 22:20:25 发布

weixin_53444951

最新推荐文章于 2024-07-15 22:20:25 发布

阅读量65

点赞数 1

本文链接：https://blog.csdn.net/weixin_53444951/article/details/114144404

版权

如何解决高度的等比变化

分别有三种方式进行高度等比变化

第一种插入图片等比例

<DOCTYPE html>
<html lang="en”>
<head>
     <meta charset="UTF-8”>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,instial-scale=1.0">
     <title>利用插入图片实现高度等比变化</title>
 </head>

```css
<style>
清楚默认样式
*{
margin:0;
padding:0;
}
设置盒子的宽度为60% 让它们向左浮动
div{
width:40%;
float:left;
}
img{
width:100%;
解决图片底部的缝隙
vertical-algin:middle;
}
</style>

在这里插入图片描述

第一种方式是我们利用图片单独设置了高度或者宽度，另一个部分会等比例缩放的特点，进行设置
在设置的过程中会遇到一个问题照片的底部会留有空隙可以利用上面设置过的属性vertical-algin:middle;解决这个问题

设置两个盒子分别为然后添加图片
img中的图片属于相对路径 
<div class="box">
<img src="./image/pic(3).png" alt=""> 
</div>
<div class="box1">
<img src="./image/pic(4).png" alt=""> 
</div>

在这里插入图片描述


## 第二种方法利用padding来设置盒子的等比缩放

> 我们知道的是height属性的百分比设置是参考父盒子的height属性，如果我们需要让盒子的高度等比例缩放，此时的比例要和width相同，所以我们需要找到一个可以参考width属性的其他属性，比如我们给padding属性设置百分比，此时这个padding属性参考的就是width属性的宽度，通俗讲，padding属性的缩放比例就和width属性的缩放比例相同

<DOCTYPE html>
<html lang="en”>
<head>
     <meta charset="UTF-8”>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,instial-scale=1.0">
     <title>利用padding完成高度的等比变化</title>
 </head>

*{
margin:0;
padding:0;
}
div{
width:50%;
padding-top:40%;
float:left;
}
.box1{
background:cyan;
}
.box2{
background:red;
}

在这里插入图片描述

<div class="box1"></div>
<div class="box2"></div>

第三种方法使用rem实现高度等比例
rem实现高度等比变化是根据根子号

<DOCTYPE html>
<html lang="en”>
<head>
     <meta charset="UTF-8”>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,instial-scale=1.0">
     <title>利用rem高度的等比变化</title>
 </head>

*{
margin:0;
padding:0;
}
html{
font-size:30px;
}
宽度为各自占一半
div{
width:50%;
float:left;
height:10rem;
}
.box1{
background:orange;
}
.box2{
background:red;
}

<div class="box1"></div>
<div class="box2"></div>

<script>
window.onresize = function(){
//得到视口的宽度
var windowWidth = document.documentElenment.clientWidth;
//得到当前字号的比例状态需要重新计算字号
//500/30指的是当前我们以窗口状态500px设置的 当前的字号为30px的状态设置的根比例
var FZ = windowWidth/(500/30);
//给html设置动态的字号
document.ocumentElement.style.fontSize = fz + "px";
}
</script>

在这里插入图片描述

weixin_53444951

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-02-26

如何解决等比例同时扩大或缩小盒子的宽度和高度分别有三种方式进行盒子的缩放第一种插入图片等比例<DOCTYPE html><html lang="en”><head> <meta charset="UTF-8”> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
复制链接

扫一扫