0

这很奇怪.. 如果您在 iphone 上加载我的页面，图像的高度会变得非常高。但它在计算机或 nexus 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');
}
4

2 回答 2

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。

于 2013-02-21T13:21:25.733 回答
1

您已经在 HTML 和 CSS 中说明了宽度和高度

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

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

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

.proj img {width:100%;}
于 2013-02-21T13:21:47.837 回答