圖像在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上得到奇怪的高度

回答

相關問題