#javascript #html #css #twitter-bootstrap-3
Вопрос:
Мне нужна помощь, чтобы уменьшить картинку, чтобы ее можно было красиво разместить в карусели. Я сделал 2 страницы с немного другой каруселью.
На первой странице это красиво размещено: первая карусель, где изображение, если оно красиво размещено
А на второй карусели с немного другим внешним видом это выглядит так: вторая карусель, где картинка слишком большая
Коды для второй карусели (первый CSS и второй HTML)
#thumbnail-preview-indicators {
position: relative;
overflow: hidden;
}
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3,
#thumbnail-preview-indicators .slides .slide-4,
#thumbnail-preview-indicators .slides .slide-5,
#thumbnail-preview-indicators .slides .slide-6,
#thumbnail-preview-indicators .slides .slide-7,
#thumbnail-preview-indicators .slides .slide-8,
#thumbnail-preview-indicators .slides .slide-9,
#thumbnail-preview-indicators .slides .slide-10,
#thumbnail-preview-indicators .slides .slide-11{
background-size: 50%;
background-position: center center;
background-repeat: no-repeat;
}
#thumbnail-preview-indicators,
#thumbnail-preview-indicators .slides,
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3,
#thumbnail-preview-indicators .slides .slide-4,
#thumbnail-preview-indicators .slides .slide-5,
#thumbnail-preview-indicators .slides .slide-6,
#thumbnail-preview-indicators .slides .slide-7,
#thumbnail-preview-indicators .slides .slide-8,
#thumbnail-preview-indicators .slides .slide-9,
#thumbnail-preview-indicators .slides .slide-10,
#thumbnail-preview-indicators .slides .slide-11{
height: 480px;
}
#thumbnail-preview-indicators .slides .slide-1{
background-image: url(img/AudiA3.jpg);
}
#thumbnail-preview-indicators .slides .slide-2{
background-image: url(img/AudiA3b.jpg);
}
#thumbnail-preview-indicators .slides .slide-3{
background-image: url(img/AudiA3c.jpg);
}
#thumbnail-preview-indicators .slides .slide-4{
background-image: url(img/AudiA3d.jpg);
}
#thumbnail-preview-indicators .slides .slide-5{
background-image: url(img/AudiA3e.jpg);
}
#thumbnail-preview-indicators .slides .slide-6{
background-image: url(img/AudiA3g.jpg);
}
#thumbnail-preview-indicators .slides .slide-7{
background-image: url(img/AudiA3h.jpg);
}
#thumbnail-preview-indicators .slides .slide-8{
background-image: url(img/AudiA3i.jpg);
}
#thumbnail-preview-indicators .slides .slide-9{
background-image: url(img/AudiA3j.jpg);
}
#thumbnail-preview-indicators .slides .slide-10{
background-image: url(img/AudiA3k.jpg);
}
#thumbnail-preview-indicators .slides .slide-11{
background-image: url(img/AudiA3l.jpg);
}
#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
top: 20%;
bottom: inherit;
}
/* CAROUSEL INDICATORS */
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
width: 102px;
height: 69px;
background-color: transparent;
border: 1px solid white;
border-radius: 1px;
}
#thumbnail-preview-indicators .carousel-indicators li.active {
border: 1px solid red;
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
width: 100px;
height: 66px;
overflow: hidden;
opacity: 0.8;
display: block;
padding: 0;
margin-bottom: 0;
background-color: #fff;
border: none;
border-radius: 2px;
transition: all 550ms ease-out;
}
#thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail,
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover {
position: relative;
display: block;
border: 1px solid white;
opacity: 1;
transform: scale(1.5);
z-index: 1;
}
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover {
border: 1px solid red;
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1440px) {
} <div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel">
<!-- INDIKATORI -->
<ol class="carousel-indicators">
<li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="1">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3b.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="2">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3c.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="3">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3d.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="4">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3e.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="5">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3g.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="6">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3h.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="7">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3i.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="8">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3j.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="9">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3k.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="10">
<div class="thumbnail">
<img class="img-responsive" src="img/AudiA3l.jpg">
</div>
</li>
</ol>
<!-- KRAJ NAVIGATORA-->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"><img src="img/AudiA3.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-2"><img src="img/AudiA3b.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-3"><img src="img/AudiA3c.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-4"><img src="img/AudiA3d.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-5"><img src="img/AudiA3e.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-6"><img src="img/AudiA3g.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-7"><img src="img/AudiA3h.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-8"><img src="img/AudiA3i.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-9"><img src="img/AudiA3j.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-10"><img src="img/AudiA3k.jpg" alt="Audi A3"></div>
</div>
<div class="item slides">
<div class="slide-11"><img src="img/AudiA3l.jpg" alt="Audi A3"></div>
</div>
</div>
<a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> Поэтому я надеюсь, что кто-нибудь знает, как это исправить, потому что я перепробовал все.
Комментарии:
1. Вы пробовали содержать (либо в качестве значения размера фона, либо в соответствии с объектом).
2. Я не уверен, что ты думаешь?
3. Что произойдет, если вы попробуете это сделать?
4. Если я попробую что? Я не понимал, что я должен написать?
5. Найдите содержимое размера фона и содержимое, подходящее для объекта..