固定宽度元素的缩放错误
固定宽度元素的缩放错误
提问于 2016-10-11 12:19:00
我对变换比例尺有问题。
我有一些静态宽度的元素，我想在小视图(<768 it )上缩放它。但是，如果我使用"transfrom: scale()“的位置是错误的，而不是在中间。“转变-起源”没有帮助。我不能使用响应宽度。只有静态280 and和840 and 关于代码的示例
codepen html
<div class="container">
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>代码css
.container {
max-width: 840px;
border: 1px solid #000;
}
.item-list {
display: table;
-webkit-transform: scale(.34);
-moz-transform: scale(.34);
transform: scale(.34);
}
.item {
display: table-cell;
min-width: 280px;
height: 634px;
background: #000;
}
.item:first-child {
background: #234;
}
.item:last-child {
background: #ccc;
}
@media (min-width: 768px) {
.item-list {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}谢谢
回答 1
Stack Overflow用户
发布于 2016-10-11 13:11:54
问题在于min-width:280px on .item。
此样式设置为768 is以下。3x280px大于768，so...the问题与对齐度有关。
我建议您使用min-width:33.33% width max-width:280px (如果您想保留它，或者您可以放弃它)，并将width:100%添加到.item-list中
见下面的片段或小提琴
如果有帮助请告诉我
.container {
max-width: 840px;
border: 1px solid #000;
box-sizing:border-box;
}
.item-list {
display: table;
-webkit-transform: scale(.34);
-moz-transform: scale(.34);
transform: scale(.34);
width:100%;
}
.item {
display: table-cell;
min-width:33.33%;
height: 634px;
background: #000;
}
.item:first-child {
background: #234;
}
.item:last-child {
background: #ccc;
}
@media (min-width: 768px) {
.item-list {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
.item {
min-width:33.33%;
}
}<div class="container">
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
可以将或设置为768 on min-width:33.33% (连同width:100% on item-list )和超过768 on min-width:280px;。
见片段或小提琴
.container {
max-width: 840px;
border: 1px solid #000;
}
.item-list {
display: table;
-webkit-transform: scale(.34);
-moz-transform: scale(.34);
transform: scale(.34);
width:100%;
}
.item {
display: table-cell;
min-width: 33.33%;
height: 634px;
background: #000;
}
.item:first-child {
background: #234;
}
.item:last-child {
background: #ccc;
}
@media (min-width: 768px) {
.item-list {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
.item {
min-width: 280px;
}
}<div class="container">
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
P.S.别忘了在.container上添加box-sizing:border-box。因为您有一种border:1px样式，所以2px (842 pxx842 2px而不是840 px840px)使它变得更高、更宽。因此，您需要设置box-sizing
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39977094
复制相关文章
相似问题
腾讯云开发者
