kan*_*aka 38 css html5 scale css3 css-transforms
在我的页面中间,我有一个div元素,其中包含一些内容(其他div,图像,等等).
<div>
before
</div>
<div id="content-to-scale">
<div>something inside</div>
<div>another something</div>
</div>
<div>
after
</div>
我想扩展该元素(内容到规模)和所有它的孩子.看起来像是CSS3变换规模操作的工作.但问题是,这只是对元素层次结构可视化的转换,它不会改变页面上元素的空间(或位置).换句话说,缩放该元素将使其与"之前"和"之后"文本重叠.
是否有简单/可靠的方法来扩展视觉表示,还有占用的空间量？
没有Javascript的纯CSS的额外分数.对于使用其他转换函数(如旋转和倾斜)做正确解决方案的解决方案,还有更多要点.这不必使用CSS3转换,但需要在所有最近支持HTML5的浏览器中支持它.
Luc*_*een 10
HTML(感谢Rory)
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
<title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>
<div id="wrapper">
<div class="surrounding-content">
before
</div>
<div id="content-to-scale">
<div>something inside</div>
<div><img src="http://placekitten.com/g/150/100"></div>
<div>another something</div>
</div>
<div class="surrounding-content">
after
</div>
</div>
</body>
</html>
CSS(仍然从Rory的基地开始)
body {
font-size: 13px;
background-color: #fff;
}
#wrapper {
width: 50%;
margin-left: auto;
margin-right: auto;
border: 0.07692307692307693em solid #888;
padding: 1.1538461538461537em;
}
.surrounding-content {
border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
border: 0.07692307692307693em solid #bbb;
width: 10em;
}
#content-to-scale {
font-size: 1.1em;
}
#content-to-scale img {
width: auto;
height: auto;
min-width: 100%;
max-width: 100%;
}
说明:
我正在使用字体大小和ems来"缩放"子元素的尺寸.
Ems是相对于当前上下文的字体大小的维度单位.
因此,如果我说我的字体大小为13px,边框为1(所需的边框宽度,以像素为单位)除以13(当前上下文的字体大小也以像素为单位)= 0.07692307692307693em,浏览器应该呈现1px边界
为了模拟15px填充,我使用相同的公式,(所需像素)/(当前上下文的字体大小,以像素为单位)=所需的ems.15/13 = 1.1538461538461537em
为了驯服图像的缩放,我使用了我最喜欢的一个:自然比例保持比例,让我解释一下:
图像具有自然的高度和宽度以及它们之间的比率.如果宽度和高度都设置为自动,大多数浏览器将保留此比率.然后,您可以使用min-width和max-width控制所需的宽度,在这种情况下,使其始终缩放到父元素的整个宽度,即使它将超出其自然宽度.
(您还可以使用max-width和max-height 100%来防止图像从父元素的边框中消失,但不会超出其自然尺寸)
这确实有一些缺点:ems中的嵌套字体大小被重复应用.意思是你有:
<style type="text/css">
div{
font-size: 16px;
}
span{
font-size: 0.5em;
}
</style>
<div>
<span>
<span>
Text
</span>
</span>
</div>
您最终将以4px的"文本"渲染,而不是您可能期望的8px.
| 归档时间： |
|
| 查看次数： |
19878 次 |
| 最近记录： |