jQuery .animate动画div而不是其中的图像
[英]jQuery .animate animates the div but not the image inside
问题描述
When I animate a div using jQuery, the div gets bigger, but the picture inside of it stays the same size. 
当我使用jQuery为div设置动画时，div会变大，但其中的图片保持不变。
How to I make the div, as well as the image inside of it, get bigger but remain to scale? 如何使div以及其中的图像变大但仍保持按比例缩放？
Do I actually have to address everything that is in the stylesheet, in the .animate() method? 我是否真的需要解决.animate（）方法中样式表中的所有内容？ Not just width and height? 不只是宽度和高度？ If so, how do I manipulate the url("someImage.jpg") that is in the stylesheet. 如果是这样，我该如何操作样式表中的url("someImage.jpg") 。
Here is some sample code that illustrates what I am talking about: 这是一些示例代码，说明了我在说什么：
<!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>
2 个解决方案
解决方案1
2 已采纳 2015-09-19 18:53:19
I think you want something like this: 我想你想要这样的东西：
Just increase your background-size: xx px; 只需增加background-size: xx px; or (backgroundSize:"xx px") along width & height changes. 或(backgroundSize:"xx px")沿宽度和高度的变化。
$("#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>
Note : I have just randomly added 500px, change as per your requirement.
解决方案2
0 2015-09-19 18:50:04
You've set a fixed background size of 300px so it's not going to change whatever size the containing div is. 您已将背景大小固定设置为300px，因此不会更改包含div的大小。 Try this in your CSS: 在您的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:
}
Setting the background size to contain will make the image always as large as possible to fill the container, while maintaining the original aspect ratio. 将背景尺寸设置为contain将使图像始终尽可能大以填充容器，同时保持原始宽高比。
Edit 编辑
Since your preferred scale isn't 100%, you can use a percentage size. 由于首选比例不是100％，因此可以使用百分比大小。 About 110% is what you're looking for to keep the same scale. 您想要保持相同的比例大约是110％。
background-size: 110%;
MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size MDN ： https ： //developer.mozilla.org/en-US/docs/Web/CSS/background-size
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.