Question

我正在尝试正确放置三张照片:(电视，内容，相框）。在静态站点上很容易。但是我如何在动态页面上执行此操作？我想在窗口中安装完整的电视。有没有CSS解决方案或只有javascript可以吗？在我的测试文件中，我测试了一些脚本，但没有任何成功。请看这里：myTest File

这是我玩的功能：

  function backgroundResize(){
         var windowH = $(window).height(); var windowW = $(window).width();
         var aspect_ratio = windowH / windowW;
    $('.background').each(function(i){
        var path = $(this);            // console.log(path);

        var contW = path.width();
        var contH = path.height();
        var imgW = path.attr("data-img-width");
        var imgH = path.attr("data-img-height");
        var ratio = imgW / imgH;
        // set img values depending on cont
        imgH = contH;
        imgW = imgH * ratio;
        // fix when too large
        if(contW > imgW){
            imgW = contW;
            imgH = imgW / ratio;
        }
       if (path.hasClass("fx-bg")){
                 path.find('img').css({width:contW*ratio + "px ", height: contH*ratio + "px"});
       };
       if (path.hasClass("fx-eyes")){
                path.find('img').css({ width:imgW*aspect_ratio + "px ", height: imgH*aspect_ratio + "px"});
                var t = (windowH-(imgH*aspect_ratio))/2;
                var l = (windowW-(imgW*aspect_ratio))/2;
                path.css({top: t + "px", left: l + "px"});
                console.log("eyes t:%s  -  l:%s",t,l);
       }
       if (path.hasClass("test")){

            $('main').css('max-width', imgW*aspect_ratio + 'px').css('max-height', imgH*aspect_ratio+'px');
                var tt = (windowH-(imgH*aspect_ratio))/2;
                var ll = (windowW-(imgW*aspect_ratio))/2;
                path.css({top: tt + "px", left: ll + "px"});
                console.log("test t:%s  -  l:%s",tt,ll);
       }


  });
}

Answer 1

通过使父位置相对，确保所有图像具有完全相同尺寸的相同父级或父级。然后简单地给所有图像这个css：

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%); /* for old webkit browsers. */
transform: translate(-50%, -50%);

删除所有其他css内容。

我不确定你是否在讨论这个问题，但是你也可以通过简单的检查来缩小或升级图像，然后将变换比例应用于所有图像，使一切都适合它的父级。只有当所有图像使用max-width / height属性具有相同的宽度和高度时，您才可以使用CSS。

如何在响应环境中组合（叠加）一堆图片？

1 个答案: