缩放div及其内容以适合窗口
我有一个固定大小的<div>，其中包含一些复杂的内容(包括文本和背景图像)。此<div>的大小以像素为单位进行了硬编码(其内容取决于此大小，并且内容位置也以像素为单位进行了硬编码)。
这里有一个非常简单的例子：http://jsfiddle.net/dg3kj/。
我需要缩放该div和其中的内容，保持其纵横比，使其适合窗口。
不需要我手动更改<div>内容的解决方案更可取(它是动态生成的，是一堆非常混乱的遗留代码，我希望避免接触它)。JavaScript (jQuery)解决方案是可以的(包括那些更改生成内容- as的解决方案，只要它是在生成本身的事实之后完成的)。
我尝试使用transform: scale()，但没有得到令人满意的结果。请看这里：http://jsfiddle.net/sJkLn/1/。(我希望红色背景不可见，最外层的<div>大小不应该被缩小的<div>的原始尺寸拉伸。)
有什么线索吗？
回答 6
Stack Overflow用户
发布于 2013-09-12 05:35:26
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>
Stack Overflow用户
发布于 2019-10-20 08:05:25
我从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)+')';}}Stack Overflow用户
发布于 2020-06-27 18:41:43
如果任何人构建了一个全屏应用程序，比如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，分辨率也会恢复正常
希望有人觉得它有用:)
https://stackoverflow.com/questions/18750769
复制相似问题