Сделайте изображение отзывчивым на всех устройствах

Question

Сделайте изображение отзывчивым на всех устройствах

1

У меня есть карусель на моей веб-странице, где я пытаюсь реагировать на все устройства.

Моя декларация css для 3-х разных устройств, поэтому определена высота соответственно 350px, 255px, 125px

.banner{
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    min-height:350px;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}
.banner{
    min-height:255px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
}
.banner{
    min-height:125px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    }

Мой html-код:

<div class="banner">                    </div>

Пожалуйста, сообщите, как я могу сделать свое изображение подходящим для всех устройств. Заранее спасибо.

Saibalu 13 нояб. 2015, в 04:37

Источник

1

Возможный дубликат Сделать изображение отзывчивым - самый простой способ
lyndact 13 нояб. 2015, в 03:31
0

По какой-то конкретной причине вы не используете запросы @media
Airwind711 13 нояб. 2015, в 03:36
0

Я бы использовал разные изображения для каждого типа мультимедиа, поэтому ваш браузер не должен иметь векторное масштабирование. Это и правило @media .
StackSlave 13 нояб. 2015, в 03:39

Показать ещё 1 комментарий

Теги:

php

javascript

css

html5

css3

2 ответа

Ещё вопросы

Возможный дубликат Сделать изображение отзывчивым - самый простой способ
По какой-то конкретной причине вы не используете запросы @media
Я бы использовал разные изображения для каждого типа мультимедиа, поэтому ваш браузер не должен иметь векторное масштабирование. Это и правило @media .

cijanzen · Answer 1 · 2015-11-13T02-52-00.000Z

То, как вы создали свой CSS, каскадирует последнее правило, которое вы перечисляете, чтобы вы всегда получали минимальную высоту 125 пикселей. Вам нужно разделить свои правила на медиа-запросы. @media (min-width: 320px) {.banner { min-height: 125px}} Таким образом, когда размер вашего видового экрана изменится, правила будут применяться на предоставляемых вами "контрольных точках" мультимедиа.

Jinu Kurian · Answer 2 · 2015-11-13T03-37-00.000Z

Ширина: 100% сломает его, когда вы смотрите на более широкие.

Следующим является Bootstrap img-отзывчивый

max-width: 100%; 
display:block; 
height: auto;

Вот как вы должны писать медиа-запросы

@media (min-width: 480px) { //for mobile devices 
  .banner {
    min-height: 125px
   }
}

@media (min-width: 768px) { // for tablets
  .banner {
    min-height: 255px
   }
}