Reputation: 107
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: 93
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
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
Reputation: 84
Try setting maximums for your image:
#productPhoto img{
max-height: 80%;
max-width: 100%;
}
Upvotes: 1