javascript - img 自适应
屏幕左侧有上中下三张图片 想要自适应 用了媒体查询但是放到1900的就不行了而且小屏下也有突变 怎么用js控制图片大小啊 媒体查询那个img外的p大小要是怎么计算出来的请输<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title></head>
<style>
img{
margin:0;}
.head{
width:100%
height:50px;
background: blue;
}
.left{
position:absolute;
left:0;
width:30%;
height:100%;
float: left;
background: yellow;
}
.right{
position:absolute;
right: 0;
width:70%;
height:100%;
background:red;
}
.img-auto{
width:100px;
height:100px;
}
.home-fu{
width:100%;
height:100%;
}
@media (min-width: 1024px){
body{font-size: 18px}
.img-auto{
width:350px;
position: initial;
margin:0 auto;
}
}
@media (min-width: 1100px) {
body{font-size: 20px}
.img-auto{
width:315px;
position: initial;
margin:0 auto;
}
}
@media (min-width: 1280px) {
body{font-size: 22px;}
.img-auto{
width:342px;
position: initial;
margin:0 auto;
}
}
@media (min-width: 1366px) {
body{font-size: 24px;}
.img-auto{
width:362px;
position: initial;
margin:0 auto;
}
}
@media (min-width: 1440px) {
body{font-size: 25px !important;}
.img-auto{
width:500px;
position: initial;
margin:0 auto;
}
}
@media (min-width: 1680px) {
body{font-size: 28px;}
.img-auto{
width:362px;
position: initial;
margin:0 auto;
}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
.img-auto{
width:362px;
position: initial;
margin:0 auto;
}
}
img{
width:100%;
}
.left{
}
.fot-img{
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}</style>
<body>
<p class="head"></p>
<p class="content">
<p class="left">
<img src="home_xy_up.png" alt="">
<p>fdsafda</p>
<p class="img-auto">
<img class="home-fu" src="home_fu.png" alt="">
</p>
<span>adafaf</span>
<img class="fot-img" src="home_xy_down.png" alt="">
</p>
<p class=right""></p>
</p></body>
</html>入代码
