0
私はHTMLでフルスクリーンカルーセルを設計していると私はイメージがカルーセル画像サイズは
A
答えて
0
これを試してみてください、それは歪みなしにすべての画面サイズにリサイズするように持つべき理想的なサイズが何であるかを知っていただきたいと思いをSOZE
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3>Bootstrap 3.3.0</h3>
<p>Responsive Moving Box Carousel Demo</p>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
CSS
/* Global */
img { max-width:100%; }
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
opacity: 0.6;
text-decoration: none;
}
body{
border-top:0;
background:#c4e17f;
background-image:-webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-moz-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-o-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4)
}
.thumbnails li> .fff .caption {
background:#fff !important;
padding:10px
}
/* Page Header */
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #999;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
ul.thumbnails {
margin-bottom: 0px;
}
/* Thumbnail Box */
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #666;
border: 0px;
border-radius: 0px;
display: inline-block;
font-size: 34px;
font-weight: 200;
line-height: 18px;
opacity: 0.5;
padding: 4px 10px 0px;
position: static;
height: 30px;
width: 15px;
}
/* Mobile Only */
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
li { list-style-type:none;}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
JS
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});
関連する問題
- 1. ExpertPdfカルーセル画像
- 2. さえずり - ブートストラップ中央カルーセル画像画面サイズ
- 3. 画像はjqueryのカルーセル
- 4. 背景画像カルーセルの背景画像
- 5. カルーセルの画像のサイズを制御する方法
- 6. ブートストラップ応答カルーセル画像
- 7. 画像カルーセルCSSの問題
- 8. Amazonの商品カルーセルに似た画像カルーセルがほしい
- 9. 画像を切り取る垂直カルーセル
- 10. 画像カルーセル間隔の問題
- 11. 私のjqueryの画像カルーセル向上
- 12. Jqueryカルーセル追加新しい画像
- 13. javascriptを使用した画像カルーセル
- 14. Navbarがカルーセル画像に切り込む
- 15. カルーセル画像が重複しません
- 16. jQueryカルーセル - 任意の数の画像
- 17. 画像カルーセルを反応的にする
- 18. tableau画像カルーセルのヘルプが必要
- 19. 3つの画像を持つカルーセル
- 20. Wagtailでのカルーセル画像のトラブル
- 21. Owlカルーセルの画像スライドが反応しないようにサイズ変更する
- 22. 中央のブートストラップウィンドウのサイズが変更されたときのカルーセル画像
- 23. TTTableItem画像サイズ
- 24. MooFlow画像サイズ
- 25. UITabBarItem画像サイズ
- 26. 異なる描画サイズの画像サイズ
- 27. は、Facebookのプロフィール画像サイズ
- 28. ユニバーサルアプリの画像サイズは？
- 29. サイズ変更SVG画像は
- 30. 画像サイズ/解像度