图像在iPhone上得到奇怪的高度

这很奇怪。如果你在iphone上加载我的页面，图像的高度会变得更高。但它可以在计算机或nexus 7上正常工作（=图片获得其父母的100％）。任何人都可以帮我弄清楚为什么？这里是CSS （所有应该影响图像是在/ ---身体--- /）：图像在iPhone上得到奇怪的高度

{ 
    box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 
    font-family: 'fonten'; 
    font-weight: 700; 

} 

html, body 
{ 
    margin: 0; 
    padding: 0; 
} 

body 
{ 
    background-image: url('css/bgnoise.png'); 
} 


/*--------------------------- OTHER  -----------------------------------*/ 

.clearfix:before, 
.clearfix:after 
{ 
    content:""; 
    display:table; 
} 
.clearfix:after 
{ 
    clear:both; 
} 
.clearfix { 
    zoom:1; 
} 

a { 
    cursor: pointer; 
    text-decoration: none; 
    color: black; 
} 

section a:hover { 
    opacity: 50%; 
} 

/*--------------------------- HEADER  -----------------------------------*/ 

header { 
    background: #fff; 
    margin-bottom: 50px; 
} 

h1 { 
    text-align:center; 
    margin: 0; 
    padding: 50px; 
    color:black; 
} 

.nav { 
    text-align:center; 
    text-transform: uppercase; 
} 

.nav li, ul { 
    list-style: none; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 25px; 
    letter-spacing: 4px; 
    color: black; 
} 

.nav li { 
    margin-right: 10px; 
} 

.nav li:last-child { 
    display: block; 
    margin-right: 0; 
} 

.current_page_item a { 
    color:#fe6330; 
} 


/*--------------------------- BODY  -----------------------------------*/ 


h3 { 
    font-size: 1.75em; 
    text-align: center; 
} 

h4 { 
    text-align: center; 
    font-size: 1.2em; 
    margin-bottom: 0; 
} 


.seperator { 
    height: 2px; 
    background:black; 
    width: 40%; 
    margin:0px auto; 
} 

.quote { 
    text-align: center; 
    padding: 0px 20%; 
    line-height: 200%; 
    font-size: 0.85em; 
} 

.projects { 
    margin-top: 20px; 
    max-width: 960px; 
    margin: 0 auto; 
} 

.proj { 
    margin: 20px auto 0 auto; 
    width: 60%; 

} 

.proj img { 
    width: 100%; 
    height: 100%; //this should make the pics height 100% of its parent 
} 

/*--------------------------- what i do  -----------------------------------*/ 

.whatido { 
    background: white; 
    padding:50px; 
} 

.dos { 
    display: table; 
    margin: 0 auto; 
} .dos p { 
    text-align: center; 
} 


/*--------------------------- FOOTER  -----------------------------------*/ 

footer{ 
    background: #232323; 
    color: white; 
    padding: 50px 0; 
} 

.footercont { 
    display: table; 
    margin: 0 auto; 
} .footercont p { 
    text-align: center; 
} .footercont>p>a { 
    color: white; 
    font-size: 1.5em; 
} 

/*--------------------------- FONT  -----------------------------------*/ 

@font-face 
{ 
font-family: 'fonten'; 
src: url('css/raleway/raleway_thin.ttf'), 
    url('css/raleway/raleway_thin.otf'), 
    url('css/raleway/raleway_thin.eot'); 
}

来源

2013-02-21 tobbe

如果我删除身高：100;图片得到960px高度（它们的信号大小） – tobbe 2013-02-21 13:01:30

hmmmmm，将高度设置为自动似乎可以修复它。我不知道为什么，有人能够启发我吗？ – tobbe 2013-02-21 13:08:08

这是你得到的很多代码..我建议你先隔离你的问题或者用更小的代码块来重现它..它使得每个人的生活更轻松 – abbood 2013-02-21 13:20:19

你声明的高度在每个

<img width="940" height="940" src="http://hmpf.nu/wp-content/uploads/2013/02/test.jpg" class="attachment-full wp-post-image" alt="test">

这就是为什么如果你不把高度设置为自动，他们是940高。

来源

2013-02-21 13:21:25

你说的HTML宽度和高度以及CSS的

<img width="940" height="940" />

从HTML删除这些明确的高度，只设置在CSS的高度。

使用响应式设计，您只需指出100％的图像宽度和高度会自动设置为相同的百分比，以保持图像不会出现正确的高宽比height:auto。

.proj img {width:100%;}

来源

2013-02-21 13:21:47 themightyant

图像在iPhone上得到奇怪的高度

回答

相关问题