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 に答える