php - 我怎样才能保持 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;" />

希望这对您有所帮助:)