Question

我有一种情况需要在<div>的背景中设置图像，并希望它根据div动态调整大小。这意味着<div>的高度和宽度可以根据飞行中的数据而变化。所以我希望图片遵循<div>。感谢

Answer 1

您可以依赖CSS background-size属性。 See this tutorial - 它们将它应用于body元素，但这可以适用于任何<div>。基本上，它看起来像这样：

.examplediv {
background: url(images/example.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 }

有一些过滤器需要应用才能让IE表现出来，但是帖子底部会提到它们。

Answer 2

使用jQuery调整图像大小
http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

var max_size = 200; 
$("img").each(function(i) { 
  if ($(this).height() > $(this).width()) { 
    var h = max_size;   
    var w = Math.ceil($(this).width() / $(this).height() * max_size);   
  } else {  
    var w = max_size;   
    var h = Math.ceil($(this).height() / $(this).width() * max_size);   
  } 
  $(this).css({ height: h, width: w }); 
});

Answer 3

将图片标记中的width属性设置为100％，因此它将完全驻留在父标记中。

如何在DIV更改时动态调整图像大小？

3 个答案: