Question

当我使用jQuery为div设置动画时，div会变大，但内部的图片会保持相同的大小。

如何制作div以及其中的图像变得更大但仍然可以扩展？

我真的必须在.animate（）方法中解决样式表中的所有内容吗？宽度和高度不仅仅是？如果是这样，我如何操纵样式表中的url("someImage.jpg")。

以下是一些示例代码，说明了我在说什么：

＆＃13;

<!DOCTYPE html>
<html>
    <head>        
        <style type="text/css">
            #one { /* Second info block */
                float: right;
                height: 350px;
                width: 275px;
                border: 1px solid black;
                border-radius: 5px;
                margin-left: 10px;
                margin-top: 35px;
                margin-right: 175px;  
                background: url(http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg) no-repeat;
                background-size: 300px;
                background-position: center; 
            }
        </style>        
        <script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    
    <body>        
        <div id="one"></div>    
        <script>        
            $("#one").click(function() {
                $(this).animate({
                    width: "500px",
                    height: "700px",
                }, 1000);
            });        
        </script>        
    </body>    
</html>

＆＃13;

Answer 1

我想你想要这样的东西：

只需沿宽度增加background-size: xx px;或(backgroundSize:"xx px")＆amp;身高变化。

$("#one").click(function() {
  $(this).animate({
    width: "500px",
    height: "700px",
    backgroundSize: "500px",
  }, 1000);
});

#one {
  /* Second info block */
  float: right;
  height: 350px;
  width: 275px;
  border: 1px solid black;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 35px;
  margin-right: 175px;
  background: url(http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg) no-repeat;
  background-size: 300px;
  background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="one"></div>

注意：我刚刚随机添加了500px，根据您的要求进行了更改。

Answer 2

您已将固定背景大小设置为300px，因此不会更改包含div的大小。在你的CSS中试试这个：

#one {
     /* your styles */
     background: url('http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg') no-repeat;
     background-size: contain;
     background-position: 
}

将背景大小设置为contain将使图像始终尽可能大以填充容器，同时保持原始宽高比。

修改

由于您的首选比例不是100％，因此您可以使用百分比大小。大约110％是你想要保持相同规模的。

background-size: 110%;

MDN ：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

jQuery .animate动画div而不是里面的图像

2 个答案: