我怎样才能保持 Mozilla Firefox 上的图像比例?
How could I keep the ratio of images on Mozilla Firefox?
我使用此代码检索并保持图像的比例:
<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; ?>"
,但不遵守比例
使用 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;" />
希望这对您有所帮助:)
我使用此代码检索并保持图像的比例:
<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; ?>"
,但不遵守比例
使用 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;" />
希望这对您有所帮助:)