Question

这很奇怪..如果你在iphone上加载我的页面，图像的高度会变得非常高。但它在计算机或连接7上工作正常（=图片获得100％的父级）。任何人都可以帮我找出原因吗？这里是css （所有应该影响图像的是--- --- body --- /）：

{
    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');
}

Answer 1

你在宣布每个

的高度

<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。

Answer 2

您已经在HTML和CSS

中说明了宽度和高度

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

从HTML中删除这些显式高度，仅在CSS中设置高度。

使用快速响应设计，您只需要声明100％的图像宽度和高度将自动设置为相同的百分比，以保持图像的正确纵横比height:auto。

.proj img {width:100%;}

图像在iphone上变得奇怪

2 个答案: