Question

我试图根据不同的图像重新调整图像大小。

我有一个背景图片，当您缩小浏览器或在较小/较大的屏幕尺寸上打开网站时，图像会调整大小。但是当背景越来越小时，其他图像也不会调整大小。

看：www.taylanmiroglu.com/ninniline/v1.0

当你的鼠标来到女人和枕头时，你可以看到带动画的新图像（在我的电脑分辨率上）

当您缩小浏览器的尺寸时，背景图像会以相同的比例完美地变小，但图像（女性和枕头）不会变得更小而且背景比例相同。

我希望使用背景调整大小来调整它们的大小。

例如;如果背景比原始尺寸小97％，其他图像也必须更小，相同的比例，在本例中为97％。

我该怎么做？

非常感谢，我已经搜索了6个小时，但到目前为止还没有。

整页代码：

html { 
  background: url(images/arka_plan.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#manken {
    position: fixed;
    top:0px;
    left:0px;
    margin-top:0px;
    margin-left:260px;
    opacity:0;



    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

#manken:hover {
    opacity:1;

    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

#yastik {
    position: fixed;
    top:0px;
    left:0px;
    margin-top:350px;
    margin-left:665px;
    opacity:0;



    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

#yastik:hover {
    opacity:1;

    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

<body>
<div id="manken"><img src="images/manken.png"></div>
<div id="yastik"><img src="images/yastik.png"></div>
</body>

Answer 1

我已将'cover'background-size属性设置为javascript函数。然后，主图像位于一个元素上，该元素被调整大小并以该函数为中心。

其他元素位于此基本元素中，并自动调整大小/重新定位

function resizeContent() {
  var ele = document.getElementById('container');
  var height = ele.clientHeight;
  var width = ele.clientWidth;
  var innerWidth = 1432;
  var imageHeight = 703;
  var scaleH = width /innerWidth;
  var scaleV = height / imageHeight;
  var scale = Math.max (scaleH, scaleV);

  var ele2 = document.getElementById('base');
  ele2.style.transform = "scale(" + scale + ")";

  var top = (height - imageHeight) / 2;
//  top = Math.min (top, 0);
  ele2.style.top = top + "px";

  var left = (width - innerWidth) / 2;
//  left = Math.min (left, 0);
  ele2.style.left = left + "px";
}
 
// Function to add event listener
window.onload = function () { 
  window.addEventListener("resize", resizeContent, false); 
}

html, body {
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  overflow: hidden; 
  position: relative;
}
#base { 
  background: url(http://i.stack.imgur.com/9FUus.jpg); 
  width: 1432px;
  height: 703px;
  position: absolute;
  top: 0px;
  left: 0px;
}
#manken {
    position: absolute;
    top: 0px;
    left: 17.6%;
    opacity:0.5;
    transition: opacity 0.8s ease-in-out;
}

#manken:hover {
    opacity:1;
}

#yastik {
    position: absolute;
    top: 53%;
    left: 49%;
    opacity:0.5;
    transition: opacity 0.8s ease-in-out;
}

#yastik:hover {
    opacity:1;
}

<div id="container">
<div id="base">
<div id="manken"><img src="http://i.stack.imgur.com/Vizpy.png"></div>
<div id="yastik"><img src="http://i.stack.imgur.com/yBlhs.png"></div>
</div>
</div>

Answer 2

您是否尝试过使用css提供的转换属性？??它可能会有所帮助。

你可以试试这个：

http://codingtips.kanishkkunal.in/zoom-effect-image-css/

Answer 3

这是一个非常基本的解决方案，但你是否试过制作2个较小的图像画布＆＃39;与大背景大小相同？如果你将元素与大背景上的匹配部分对齐，然后使背景的其余部分透明......

所以基本上你有3个相同大小的图像，但其中2个只是切出的对象，其余的都是透明的。因此，按比例缩小显示将以相同的比例缩放图像。

基于html5 / css3中的另一个图像调整图像大小

3 个答案: