Question

我遇到以下代码的问题：

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pic').attr("src", "image.jpg");
            if ($('#pic').width() > 85)
                $('#pic').attr("width", "85px");
        });
    </script>
    <body>
        <img id="pic" src="">
    </body>
</html>

当第一次加载时打开浏览器并浏览到该页面时，会加载带有原始宽度的“image.jpg”图像。刷新后宽度为85px。

在第一次设置源之后警告图像宽度时宽度为0px。

请帮忙，感谢

Answer 1

为什么不设置css规则，如

#pic{
    width:85px;
}

Answer 2

您需要等待图像加载才能引用其属性等

DEMO：http://jsfiddle.net/7wuVb/

$(document).ready(function() {
    $('#pic').load(function() { 
        if ($('#pic').width() > 85)
                $('#pic').attr("width", "85px");
    });
    $('#pic').attr("src", "https://www.google.com/logos/2014/worldcup14/closing/cta.png");
});

Answer 3

尝试使用两个单独的样式类。

http://jsfiddle.net/7wuVb/1/

.outter 
{
  width: auto;
  max-width: 85px;
  max-height: auto;
  margin-top: 0px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;    
}

.inner {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

<div class="outter">
    <img class="inner" id="pic" src="" />
</div>

$(document).ready(function() {
    $('#pic').attr("src", "https://www.google.com/logos/2014/worldcup14/closing/cta.png");
});

尽可能避免在javascript中进行大小操作。依靠CSS来完成这项工作。

加载图像并调整图像的宽度

3 个答案: