在行内缩放div

时间:2016-05-31 21:53:30

标签: css twitter-bootstrap twitter-bootstrap-3 scaling css-transforms

我想缩放 div .row 中的 div。.card-cell ,但我还有额外的填充/边距?他们周围。



	.row .card-cell{
		zoom:0.53;
		-moz-transform:scale(0.53);
		-webkit-transform: scale(0.53);
	}


.redBackground {
	background: #E32 !important;
}

.card {
   		margin: 0.3em;
	width: 73px;
	height: 98px;
	float: left;
}

.no-padding{
	padding: 0;
}

<script src="//code.jquery.com/jquery-2.2.3.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid">
	<div class="row ">
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="as-kier">
              1
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="dwa-kier">
              2
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="trzy-kier">
              3
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="cztery-kier">
              4
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="piec-kier">
              5
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="szesc-kier">
              6
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="siedem-kier">
              7
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="osiem-kier">
              8
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="dziewiec-kier">
              9
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="dziesiec-kier">
              10
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="walet-kier">
              walet
			</div>
		</div>
		<div class="col-xs-1 card-cell no-padding">
			<div class="no-padding card redBackground" id="dama-kier">
              dama
			</div>
		</div>
<!-- here is more divs with .col-xs-1 -->
	</div>
</div>
&#13;
&#13;
&#13;

如何在没有这些额外空间的情况下扩展div内部?

在缩放的div周围显示背景和边距(?)的图像: dev image of margins(?) around scaled divs

0 个答案:

没有答案