我如何保持Mozilla Firefox上的图像比例？

Question

I used this code to retrieve and keep the ratio of an image:

<img class="r r-2x img-full " style="background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;"/>

this solution works in IE and Chrome not in Mozilla Firefox where the image is not displayed. So how could I proceed? I tried with src="<?php echo $image; ?>", but the ratio is not respected

Answer 1

Using img or div shouldn't matter. The only problem I see is that I have to apply a width and height on the element in order to view the image. The image stays in the correct aspect ratio though.

With the img tag:

<img class="r-r-2x-img-full" border="0" style="display:block; width: 100px; height: auto; background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;" />

With the div tag:

<div class="r-r-2x-img-full" border="0" style="display:block; width: 100px; height: auto; background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;" />

Hope this helped you out :)