CODEWITHSUNDEEP
cssimage-resizing
luca89pe
luca89pe

Reputation: 107

firefox css image

i have a trouble with Firefox img display. My page contains a product description:

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

the css is this:

#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;
}

Now, the img prova.jpg is very big (width: 2676px, height: 2068px). With Chrome the img is resized at 80% of #productPhoto, but firefox doesn't, so if i see my page in firefox, the img is huge!!! :( Some suggestions?

Thank you, Luca

Upvotes: 0

Views: 92

Answers (3)

Christos
Christos

Reputation: 59

try this

    <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*/

    }

Upvotes: 1

Pranav
Pranav

Reputation: 8871

Can you put image height in pixels :-

#productPhoto img{
   height:100px;
}

Or Andy Suggestion will also work, if you want to give in percentage.

or Else you can specify parent height in pixel for Exe:-

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

}

Upvotes: 1

Andy
Andy

Reputation: 84

Try setting maximums for your image:

#productPhoto img{
    max-height: 80%;
    max-width: 100%;
}

Upvotes: 1

Related Questions