简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - img 自适应
黄舟
黄舟 2017-04-11 11:35:40
0
1
394

屏幕左侧有上中下三张图片 想要自适应 用了媒体查询但是放到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>入代码

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

membalas semua(1)
左手右手慢动作
左手右手慢动作2017-04-11 11:37:40 Tingkat 1

三张图片想一样宽？img{width:100%};然后 他们就一样宽了。不用写你那些奇奇怪怪的样式。

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！