-1
我正在尝试制作一个“全屏旋转木马”,我已经成功完成了使用twitter引导程序。如何裁剪twitter引导旋转木马图像
相当简单的程序,我有旋转木马工作正常。但是,虽然我希望宽度参数为100%(所以图像的宽度总是适合用户的任何屏幕尺寸的100%),但我希望图像的顶部和底部同样被裁剪掉各约20%。所以应该留下60%的图像。我显然不希望图像因缩小而扭曲。
HTML - (如在引导中发现,添加数据库元素和HREF链接实际上是相同的)
echo'<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>';
for ($i = 1; $i < $rows; $i++){
echo'<li data-target="#carousel-example-generic" data-slide-to="'.$i.'"></li>';
}
echo'</ol>
<!-- Wrapper for slides -->';
$row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC);
echo'<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="Article.php?id=' . $row2['ArticleID']. '">
<img src="'.$row2["BackgroundImage"].'" alt="..."></a>
<div class="carousel-caption">
<h3>'.$row2['ArticleTitle'].'</h3>
</div>
</div>';
while ($row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC)) {
echo'<div class="item">
<a href="Article.php?id=' . $row2['ArticleID']. '">
<img src="'.$row2["BackgroundImage"].'" alt="..."></a>
<div class="carousel-caption">
<h3>'.$row2['ArticleTitle'].'</h3>
</div>
</div>';
}
echo'</div>
的CSS代码旋转木马
.carousel {
position: relative;
z-index: 100;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
我可能失去了一些东西简单,但我似乎无法找到任何切断图像顶部或底部百分比的内容。
如果您发布相关代码,人们可以更好地帮助您。 – crazymatt 2015-02-09 22:28:09
这真的可以使用[MCVE](http://stackoverflow.com/help/mcve) – 2015-02-09 22:28:36