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

Question

我使用此代码检索并保持图像的比例：

<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;"/>

此解决方案适用于IE和Chrome，而不适用于未显示图像的Mozilla Firefox。那我该怎么办呢？我试过了src="<?php echo $image; ?>"，但这个比例没有得到尊重

Answer 1

使用img或div并不重要。 我看到的唯一问题是我必须在元素上应用宽度和高度才能查看图像。但是图像保持正确的宽高比。

使用img标记：

<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;" />

使用div标记：

<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;" />

希望这能帮到你：）