Я использую Bootstrap для создания карусели, у меня большие изображения, поэтому, когда экран меньше изображения, соотношение не сохраняется.
Как я могу это изменить?
Вот мой код:
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Мне нужно, чтобы изображение занимало 100% ширины, но сохраняло высоту 500px (я думаю, что это 500px). Это должно означать, что на маленьком экране мы не видим крайние левую и правую части изображения.
Я пробовал поместить изображение в div и добавить
overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
Но это не работает
Спасибо!
Проблема кроется здесь, в bootstrap CSS:
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Установив max-width: 100%
, изображение не будет больше, чем область просмотра. Вам нужно переопределить это поведение в вашем CSS:
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
Обратите внимание на max-width: none;
, добавленное внизу. Это значение максимальной ширины по умолчанию, и оно снимает ограничение.
[Вот][1] ваш обновленный фиддл.
Я думаю, что лучше справлюсь с объектом-фит помощью CSS3 атрибут
.
Если у вас есть изображения с фиксированной шириной и высотой и еще, если вы хотите сохранить пропорции, можно использовать объект-фигуры:содержит;`. Он будет поддерживать отношение с заданной высоты и ширины.
Например :
img {
height: 100px;
width: 100px;
object-fit: contain;
}
Вы можете найти более подробную информацию здесь : http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
Надеюсь, это будет кому-то полезным.
Удалите тег img
внутри элемента карусели и добавьте фон. Таким образом, вы можете использовать свойство CSS3 cover.
.item1 {
background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Этот код, наконец, работал для меня:
.carousel .item {
background:#F9F9F9;
border:1px solid #E0E0E0;
overflow:hidden;
margin-bottom:1em;
margin-top:1em;
padding:5px;
}
.carousel-inner > .item > img {
border: 1px solid #DDDDDD;
float: left;
margin: 0pt 3px;
padding: 2px;
height: none;
width: 100%;
}
.carousel-inner > .item > img:hover {
border: 1px solid #000000;
}
чтобы сохранить пропорции, и усилитель; полный охват карусель див:
img {
object-fit: cover;
overflow: hidden;
}
Как уже упоминалось, CSS3 и работает хорошо для этого. Я использовал всю ширину, фиксированную высоту для контейнера, затем масштабировать изображение, сохраняя пропорции с 'крышкой', затем выбросить переполнения:
.carousel .carousel-inner img {
width: 100%;
height: 30em;
object-fit: cover;
overflow: hidden;
}
Видимо, вышеуказанные решения не работают для меня (я не'т знаю, почему?) но я нашел другое решение с использованием JavaScript.
В основном, это более муторный способ, но тоже работает. Вы используете jQuery, чтобы установить карусель высоты к ширине разделен на определенное соотношение сторон.
Вот мой код:
var aspectRatio = 2.5; //Width to Height!!!
var imageWidth;
var imageHeight;
//bind the window resize event to the method -
//change in carousel width is only triggered when size of viewport changes
$(window).on("resize", methodToFixLayout);
//updates the carousel width when the window is resized
function methodToFixLayout(e){
imageWidth = carousel.width();
console.log("");
console.log("Method width" + imageWidth);
console.log("");
imageHeight = imageWidth / aspectRatio;
carouselContainer.height(imageHeight);
carousel.height(imageHeight);
carouselPic.height(imageHeight);
//solve the carousel glitch for small viewports - delete the carousel
windowWidth = $(window).width();
if (windowWidth < 840){
carousel.hide();
$("#side-navbar").hide();
} else {
carousel.show();
$("#side-navbar").show();
}
}
Это, кажется, работает хорошо для меня.
Надеюсь, что это работает для вас тоже.
Вы можете установить пропорции самостоятельно, или используйте другой метод. Во-первых, установить ширину окна и высоту с целью измерения, где картинка выглядит хорошо отформатирован. Запрос ширину и высоту, и выработать отношение. Вернуться в окно вернуться к исходной ширины и высоты. Пользователь не заметит изменений, но размеры будут зафиксированы.