0

Firefox の img 表示に問題があります。マイページには製品の説明が含まれています:

<article id="productPhoto">
    <img id="prodImg" src="prova.jpg" />
</article>
<article id="productDesc">
    <h3 id="prodName"></h3>
    <h3 id="prodDesc"></h3>
</article>

CSSはこれです：

#productPhoto{
    float: left;
    width: 50%;
    height: 81%;
    text-align: center;
}
#productPhoto img{
    height: 80%;
}
#productDesc{
    float: right;
    width: 50%;
}
#prodName{
    font-size: xx-large;
    padding: 10px;
}

現在、img prova.jpg は非常に大きい (幅: 2676px、高さ: 2068px)。Chrome では #productPhoto の 80% で画像のサイズが変更されますが、Firefox では変更されません。:(いくつかの提案？

ありがとう、ルカ

4

3 に答える 3

1

これを試して

    <article id="productPhoto">
    <div class"imgcontainer">
    <img id="prodImg" src="prova.jpg" />
    </div>
    </article>
    <article id="productDesc">
    <h3 id="prodName"></h3>
    <h3 id="prodDesc"></h3>
    </article>

CSS

    .imgcontainer{
    witdh:80%;
    margin:0 10%;
    background-image:url(' background: url(prova.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /*for webKit*/
    -moz-background-size: cover; /*Mozilla*/
    -o-background-size: cover; /*opera*/
    background-size: cover; /*generic*/

    }
于 2012-11-07T13:04:07.153 に答える
1

画像の最大値を設定してみてください:

#productPhoto img{
    max-height: 80%;
    max-width: 100%;
}
于 2012-11-07T12:44:19.657 に答える
1

画像の高さをピクセル単位で指定できますか:-

#productPhoto img{
   height:100px;
}

または、パーセンテージで指定したい場合は、Andy Suggestion も機能します。

または、Exeの親の高さをピクセルで指定できます:-

#productPhoto{
    float: left;
    width: 50%;
    height: 200px;
    text-align: center;
}
#productPhoto img{
  height:50%;

}
于 2012-11-07T12:50:20.990 に答える