31

<div>我有一些复杂内容（包括文本和背景图像）的固定大小。它<div>的大小以像素为单位硬编码（其内容取决于此大小，内容位置也以像素为单位硬编码）。

这是一个大大简化的示例：http: //jsfiddle.net/dg3kj/。

我需要缩放该 div 和其中的内容，保持其纵横比，使其适合窗口。

不需要我手动更改<div>内容的解决方案更可取（它是动态生成的，是一堆非常混乱的遗留代码，我想避免接触）。JavaScript (jQuery) 解决方案是可以的（包括更改生成内容的解决方案——只要它是在生成本身的事后完成的）。

我尝试玩transform: scale()，但没有产生令人满意的结果。见这里：http: //jsfiddle.net/sJkLn/1/。（我希望红色背景不可见——即最外面<div>的尺寸不应被按比例缩小的原始<div>尺寸拉伸。）

有什么线索吗？

4

6 回答 6

38 

let outer = document.getElementById('outer'),
        wrapper = document.getElementById('wrap'),
        maxWidth  = outer.clientWidth,
        maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize(){let scale,
    width = window.innerWidth,
  height = window.innerHeight,
  isMax = width >= maxWidth && height >= maxHeight;

    scale = Math.min(width/maxWidth, height/maxHeight);
    outer.style.transform = isMax?'':'scale(' + scale + ')';
    wrapper.style.width = isMax?'':maxWidth * scale;
    wrapper.style.height = isMax?'':maxHeight * scale;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: #e6e9f0;
  margin: 10px 0;
}


#wrap {
  position: relative;
  width: 640px;
  height: 480px;
  margin: 0 auto;
}
#outer {
  position: relative;
  width: 640px;
  height: 280px;
  background: url('https://source.unsplash.com/random') no-repeat center center;
  transform-origin: 0% 50%;
  border-radius: 10px;
  box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
#outer:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

#profile {
  background: url('https://source.unsplash.com/random/300x300') no-repeat center center;
  position: absolute;
  width: 60px;
  height: 60px;
  bottom: 0;
  margin: 20px;
  border-radius: 100px;
  background-size: contain;
}
#content {
  font-size: 20px;
  position: absolute;
  left: 0px;
  bottom: 0;
  margin: 30px 100px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#content div:last-child {
  font-size: 15px;
  opacity: 0.7;
}
<div id="wrap">
<div id="outer">
  <div id="profile"></div>
  <div id="content">
    <div>Monwell Partee</div>
    <div>UX / UI Designer</div>
  </div>
</div>
</div>

于 2013-09-11T21:35:25.950 回答
5

我从 dc5 中得到答案，并将其放入一个小函数中，该函数允许您根据窗口设置比例。

function scaleBasedOnWindow(elm, scale=1, fit=false){
    if(!fit){
        elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }else{
        elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }
}

如果您希望元素适合而不被截断，只需更改Math.min为Math.max，或将此函数的 fit 参数设置为 true。

缩小版：

function scaleBasedOnWindow(elm,scale=1,fit){if(!fit){elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}else{elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}}
于 2019-10-20T00:05:25.413 回答
1

如果有人构建一个全屏应用程序，比如说 1920x1080，并希望完全适合较小的屏幕 - 例如 1366x768。这就是我在 Vue.js 中所做的 - 但可以使用纯 js 和 css 来完成 - 基于上面的答案 - 主要的重要性是我专门设置了原始宽度和高度，否则它对我不起作用：

App.vue（如果 localStorage 中存在 lowres，则为条件类）

    <template>
        <div id="external-app-wrapper" :class="{lowres: isLowRes}">
            <div id="internal-app-wrapper">
                <router-view />
            </div>
        </div>
   </template>

computed: {

      isLowRes() {
         return localStorage.getItem('lowres') !== null
      }
}

比例计算为：1366/1920 和 786/1080

    #external-app-wrapper {
        width: 1920px;
        height: 1080px;
    }

    .lowres #internal-app-wrapper {
        transform-origin: top left;
        transform: scale(0.71145833333, 0.71111111111);
    }

router.js（分辨率是可选的）

       {
            path: '/app/:resolution?',
            name: 'App Home',
            component: () => import('@/components/routes/HomeRoute'),
            meta: {
                title: 'App Home'
            }
        }

在 HomeRoute.vue 我有：

        mounted() {
            if (this.$route.params.resolution === 'lowres') {
                localStorage.setItem('lowres', 'true')
                this.$router.push({ path: '/app' })
                this.$router.go()
            } else if (this.$route.params.resolution === 'highres') {
                localStorage.removeItem('lowres')
                this.$router.push({ path: '/app' })
                this.$router.go()
            }
        }

所以导航到/app/lowres重定向到/app并缩小整个应用程序并重定向到/app/highres重定向到/app并且解析恢复正常

希望有人觉得它有用:)

于 2020-06-27T10:41:42.763 回答
0

纯 JS 基于dc5的回答；
秤基于window resize

let outer = document.getElementById('outer'),
        wrapper = document.getElementById('wrap'),
        maxWidth  = outer.clientWidth,
        maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize(){let scale,
    width = window.innerWidth,
  height = window.innerHeight,
  isMax = width >= maxWidth && height >= maxHeight;

    scale = Math.min(width/maxWidth, height/maxHeight);
    outer.style.transform = isMax?'':'scale(' + scale + ')';
    wrapper.style.width = isMax?'':maxWidth * scale;
    wrapper.style.height = isMax?'':maxHeight * scale;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: #e6e9f0;
  margin: 0;
  padding: 0;
}


#wrap {
  position: relative;
  width: 640px;
  height: 480px;
  margin: 0 auto;
}
#outer {
  position: relative;
  width: 640px;
  height: 280px;
  background: url('https://source.unsplash.com/random') no-repeat center center;
  transform-origin: 0% 50%;
  border-radius: 10px;
  box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin-top: 10px;
}
#outer:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

#profile {
  background: url('https://source.unsplash.com/random/300x300') no-repeat center center;
  position: absolute;
  width: 60px;
  height: 60px;
  bottom: 0;
  margin: 20px;
  border-radius: 100px;
  background-size: contain;
}
#content {
  font-size: 20px;
  position: absolute;
  left: 0px;
  bottom: 0;
  margin: 30px 100px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#content div:last-child {
  font-size: 15px;
  opacity: 0.7;
}
<div id="wrap">
<div id="outer">
  <div id="profile"></div>
  <div id="content">
    <div>Monwell Partee</div>
    <div>UX / UI Designer</div>
  </div>
</div>
</div>

于 2021-09-27T02:20:15.283 回答
-2

只要您基于 % 制作内容的尺寸，那么您当然可以根据外部 div 动态调整它们的大小。然后只需使用 jQuery：

jQuery(document).ready(function ($) {
    var newWidth = '300px';
    $('.your-div').css('width', newWidth);
});
于 2013-09-11T20:58:52.300 回答
-2

如果您需要根据窗口动态设置它，您也可以将 div 设置为可用窗口房地产的百分比。

    jQuery(document).ready(function ($) {
        var percentChange = .66;
        var newWidth = $(window).width() * percentChange; 
        $('#primary').css('width', newWidth + 'px');
    });
于 2013-09-11T21:31:11.073 回答